余白には、marginとpaddingの２種類があります。
ボックス構造
HTMLの要素の外観は、ボックススタイルというHTMLの要素(content)のブロックをそのまたブロックの箱で順に囲んでいくという構造で作られています。
margin
border
padding
content
margin
マージン領域
隣の要素との境目に広がる境界となる隙間、要素の一番外側になる余白です。背景色等の設定はこの領域に効果は及びません。
時に上下の要素のマージンと重なることがあり、設定した大きさが変わることがあります。 マージンの相殺
マージンの設定
マージンの幅の設定は、marginプロパティで行います。
margin: 値;
<div class="margin-one">マージンの値テスト</div>
.margin-one {
margin: 0.5rem; /* 上下左右に値を設定 */
}
マージンの値テスト
.margin-two {
margin: 0.5rem 1.5rem; /* 上下と左右に値を設定 */
}
マージンの値テスト
.margin-three {
margin: 0.5rem 1.5rem 0.75rem; /* 上、左右、下に値を設定 */
}
マージンの値テスト
.margin-fore {
margin: 0.5rem 1.5rem 0.75rem 1rem; /* 上、右、下、左に値を設定 */
}
マージンの値テスト
個別指定のプロパティ
各辺個別に設定するプロパティもあります。
上：
margin-top: 値;
右：
margin-right: 値;
下：
margin-bottom: 値;
左：
margin-left: 値;
指定する値について
設定値は、長さです。単位をつけて指定します。単位がないと反映しません。
複数の値を設定する場合は、半角のスペースを入れて区切ります。
マイナスの値を設定することができます。
autoで指定することができます。
マージンの相殺
ブロックの上下のマージンは、上下に隣合っているブロックの大きい方のマージン幅に吸収されてしまうことがあります。これが、マージンの相殺です。
float要素やpositionで位置指定をされた要素では、マージンの相殺は起きません。また、flexコンテナやgritコンテナでも起きません。table要素は除外されます。
<p class="margin-2rem">マージン2rem</p>
<p class="margin-1rem">マージン1rem</p>
.margin-2rem {
margin: 2rem;
}
.margin-1rem {
margin: 1rem;
}
マージン2rem
マージン1rem
マージン2rem要素とマージン1rem要素のmargin間隔は、2rem+1rem＝3remではなく、広い方の2remに吸収されてしまいます。