margin-topプロパティの説明
CSSのmargin-topプロパティは、要素の上辺にあたる外側の余白を指定します。これは、CSSのボックス・モデルにおけるマージン・ボックス（Margin box）の寸法を定義するプロパティの一種です。
要素を配置すると、そこに四角形のボックスが生成されます。marginは、その四辺全ての余白を一括で制御しますが、margin-topは上方向の寸法のみを扱います。
マージンの操作はインライン要素には効きません。負の値を指定すると、要素を重ねることもできます。各辺に対応するプロパティは以下の通りです。
- 全てのマージン：
margin - 上辺のマージン：
margin-top - 右辺のマージン：
margin-right - 下辺のマージン：
margin-bottom - 左辺のマージン：
margin-left
margin-topに指定できる値
<length>- CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。
<percentage>- マージンの寸法を包含ブロックの幅（
width）を基準に割合（%）で表します。 auto- ブラウザの自動計算を採用します。要素の左右にこの値を指定すると、均等に余白を分配するため中央に寄せられて配置されます。
margin-topの使い方とサンプルコード
margin-topプロパティの構文は以下の通りです。
/* <length>値 */
margin-top: 10px;
margin-top: 1rem;
margin-top: -24mm;
/* キーワード値 */
margin-top: auto;
/* グローバル値 */
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: unset;
margin-topの実例
それでは実際にmargin-topプロパティの書き方を見ていきましょう。以下の例は、背景色を白く塗った<div>要素の中に<p>要素を配置して、マージンの値を変えた時の比較です。<p>要素にも背景色が指定されており、余白の違いを確認できます。
<section class="samp_box">
<div>
<p id="margin_1">margin-top: auto;</p>
</div>
<div>
<p id="margin_2">margin-top: 10px;</p>
</div>
<div>
<p id="margin_3">margin-top: 5%;</p>
</div>
<div>
<p id="margin_4">margin-top: 2rem;</p>
</div>
<div>
<p id="margin_5">margin: 10px 10% 2rem 0;</p>
</div>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > div {
overflow: auto;
margin-top: 1rem;
background: #fff;
}
.samp_box p {
margin: 0;
padding: .5rem;
background-color: #09f;
color: #fff;
}
#margin_1 {
margin-top: auto;
}
#margin_2 {
margin-top: 10px;
}
#margin_3 {
margin-top: 5%;
}
#margin_4 {
margin-top: 2rem;
}
#margin_5 {
margin-top: 10px;
margin-right: 10%;
margin-bottom: 2rem;
margin-left: 0;
}
マージンが効かない時の原因と対処方法
親要素に包含されている要素、あるいは他の要素と隣接する要素に対してmarginを指定した場合に、画面に反映されない事があります。特に、この現象は上下方向のマージンで発生します。
要素のボックスはあくまで仮想領域であるため、何らかの内容物や描画されて可視化するものがなければ、マージンの干渉材料となりえません。そのため、単なる入れ子構造の階層の一部であるボックスを用いる場合に、マージンが機能するように一工夫を加える必要があります。
以下の内容は、入れ子構造の子要素にmarginを指定した場合に、上下の方向だけが無効になってしまう現象を解消するための方法です。それぞれの方法には一長一短があります。例えば、paddingやborderは有効な寸法を明記しなければ機能しないため、厳密な寸法に影響を与えます。
<section class="samp_box">
<div id="item_1">
<p>親要素に何も指定しないと上下の余白が折りたたまれる</p>
</div>
<div id="item_2">
<p>親要素に overflow を指定</p>
</div>
<div id="item_3">
<p>親要素に padding を指定</p>
</div>
<div id="item_4">
<p>親要素に border を指定</p>
</div>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > div {
margin-top: 1rem;
background: #fff;
}
.samp_box p {
margin: 1rem;
padding: .5rem;
background-color: #09f;
color: #fff;
}
#item_2 {
overflow: auto;
}
#item_3 {
padding: .1px;
}
#item_4 {
border: 1px solid #333;
}