CSSマージン
マージンは、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。
CSSマージン
CSSmarginプロパティは、定義された境界線の外側で、要素の周囲にスペースを作成するために使用されます。
CSSを使用すると、マージンを完全に制御できます。要素の各辺（上、右、下、左）のマージンを設定するためのプロパティがあります。
マージン-個々の側面
CSSには、要素の各辺のマージンを指定するためのプロパティがあります。
margin-topmargin-rightmargin-bottommargin-left
すべてのマージンプロパティは、次の値を持つことができます。
- 自動-ブラウザがマージンを計算します
- 長さ-マージンをpx、pt、cmなどで指定します。
- ％ -包含要素の幅の％でマージンを指定します
- 継承-マージンを親要素から継承する必要があることを指定します
ヒント：負の値を使用できます。
例
<p>要素の4辺すべてに異なるマージンを設定します。
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
マージン-速記プロパティ
コードを短くするために、1つのプロパティですべてのマージンプロパティを指定することができます。
このmarginプロパティは、次の個々のマージンプロパティの省略形のプロパティです。
margin-topmargin-rightmargin-bottommargin-left
だから、これがどのように機能するかです：
marginプロパティに4つの値がある場合：
- マージン：25px 50px 75px 100px;
- 上マージンは25pxです
- 右マージンは50pxです
- 下マージンは75pxです
- 左マージンは100pxです
例
次の4つの値でmarginshorthandプロパティを使用します。
p {
margin: 25px 50px 75px 100px;
}
marginプロパティに3つの値がある場合：
- マージン：25px 50px 75px;
- 上マージンは25pxです
- 左右の余白は50pxです
- 下マージンは75pxです
例
次の3つの値でmarginshorthandプロパティを使用します。
p {
margin: 25px 50px 75px;
}
marginプロパティに2つの値がある場合：
- マージン：25px 50px;
- 上と下の余白は25pxです
- 左右の余白は50pxです
例
次の2つの値でmarginshorthandプロパティを使用します。
p {
margin: 25px 50px;
}
marginプロパティに1つの値がある場合：
- マージン：25px;
- 4つの余白はすべて25pxです
例
次の1つの値でmarginshorthandプロパティを使用します。
p {
margin: 25px;
}
自動値
marginプロパティをautoに設定して、要素をコンテナ内で水平方向に中央揃えにすることができます。
要素は指定された幅を占め、残りのスペースは左右の余白の間で均等に分割されます。
例
マージンを使用：自動：
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
継承値
この例では、<p class = "ex1">要素の左マージンを親要素（<div>）から継承します。
例
継承値の使用：
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}