概要
CSSプロパティ「margin」は、要素の４辺全てにマージン（余白）を指定することができます。このマージン領域についてですが、これは要素の外側に対して行われます。対して内側に余白をつけたい場合は padding プロパティを利用します。
<div>
<p class="margin">この要素にはマージンが10px指定されてます</p>
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #def;
border: 1px solid #000;
}
p {
background-color: #fff;
}
.margin {
margin: 10px;
}
</style>値の指定方法
{ margin: キーワード, パーセント, 値(1つから4つ)}実数値 + 以下のような単位で指定します。マイナス値も指定可能です。
| 値 | 説明 |
|---|---|
| auto | 適切な値に置き換えられます。 |
| 値 | px, em, %などで指定。マイナス値も指定可能。 |
値の単位の詳細は以下の通りです。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
4辺の値について
要素の外側４辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。値が１つの場合はその値が４辺全てに反映され、２つの値をいれると「上下」、「左右」に反映されます。更には、４つの値を入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。
| 値 | 説明 |
|---|---|
| margin: 5px | 「上下左右」に5pxの余白を指定します。 |
| margin: 5px 10px | 「上下」に5px、 「左右」に10pxの余白を指定します。 |
| margin: 5px 10px 15px | 「上」に5px、 「左右」に10px、 「下」に15pxの余白を指定します。 |
| margin: 5px 10px 15px 20px | 「上」に5px、 「右」に10px、 「下」に15px、 「左」に20pxの余白を指定します。 |
実用における注意点
マージンの相殺について
垂直に並びあった要素で、上下の要素それぞれが余白を指定している場合に気をつけなければならないのが、このマージンの相殺です。下辺に20pxの余白を指定した要素と、上辺に30pxを指定した要素があるとします。この間の余白は何pxになるでしょうか。おそらく合計した50pxになるでしょうか。下記の例をみてみましょう。
<ul>
<li>
<div class="margin-bottom20px">下辺に余白2０px</div>
<div class="margin-top30px">上辺に余白３０px</div>
</li>
<li>
<div class="margin-bottom50px">下辺に余白5０px</div>
<div>マージン指定なし</div>
</li>
</ul>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
float: left;
margin-right: 20px;
}
div {
width: 150px;
height: 100px;
border: 1px solid #000;
background-color: #def;
}
.margin-bottom20px {
margin-bottom: 20px;
}
.margin-top30px {
margin-top: 30px;
}
.margin-bottom50px {
margin-bottom: 50px;
}
</style>右側に50pxの余白をあけた要素を並べて見比べてみましたが、50pxの余白は取られておらず、値の大きい方の30pxの余白のみが取られているのが確認できます。このように垂直に並ぶ要素へのマージン指定は値が異なっていても１つのマージンとみなされますので気をつけたいポイントの一つです。
使用例
値｢auto｣ を使った、ブロック要素の画面中央寄せの実装方法です。中央寄せしたい要素の width プロパティに値が指定されている場合、それを元に左右のマージンが自動的に算出され、画面中央に表示される仕組みです。
<div>
<p class="margin">中央寄せ要素</p>
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #def;
border: 1px solid #000;
}
p {
background-color: #fff;
}
.margin {
width: 200px;
text-align: center;
margin: 20px auto;
}
</style>