プロパティ margin
プロパティ margin は要素の外側の余白を設定します。このプロパティの値は、任意のサイズの単位または、要素の余白をブラウザが独自に計算することを許可するキーワード auto です。デフォルトでは、各ブラウザは要素に様々な余白を追加する場合があります。
このプロパティは、以下のプロパティの短縮形です：
margin-top、
margin-right、
margin-bottom、
margin-left。
構文
セレクタ {
margin: 値;
}
値の数
プロパティ margin は、スペースで区切って指定された 1、2、3 または 4 の値を取ります：
| 数 | 説明 |
|---|---|
1 |
1つの値は、要素の全方向の余白を設定します。 |
2 |
1つ目の値は上下の余白を、2つ目の値は左右の余白を設定します。 |
3 |
1つ目の値は上の余白を、2つ目の値は左右の余白を、3つ目の値は下の余白を設定します。 |
4 |
1つ目の値は上の余白を、2つ目の値は右の余白を、3つ目の値は下の余白を、4つ目の値は左の余白を設定します。 |
例
まず、余白のないブロックです：
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 0;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
例
次に、ブロックに 10px の余白を設定します：
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
例
ブロックに上下 10px、左右 20px の余白を設定します：
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px 20px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
例
ブロックに上 5px、右 15px、下 25px、左 35px の余白を設定します：
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 5px 15px 25px 35px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
関連項目
-
内部余白を設定するプロパティ
padding
