要素のマージンとは、要素の境界線の周りの空白の領域です (境界線を除く)。この領域は background プロパティの影響を受けず、常に透明です。
コンテンツ
表示
要素の余白を設定する
デフォルトでは、margin 属性が設定されていない場合、HTML 要素にはマージンがありませんが、例外があります。これは、ブラウザーが<p>
要素などの一部の HTML 要素にデフォルトのマージンを設定するためです。次の属性を使用して、HTML 要素のマージンを設定できます。
- margin-top: 要素の上のマージンを設定します。
- margin-bottom: 要素の下の外側のマージンを設定します。
- margin-right: 要素の右側に外側のマージンを設定します。
- margin-left: 要素の左側の余白を設定します。
- margin: 要素のマージンを 4 方向 (上下左右) に同時に設定できるマージンの省略形プロパティ。
上記の余白プロパティのオプションの値を以下の表に示します。
価値 | 説明 |
---|---|
auto | 余白のサイズはブラウザによって計算されます |
length | px、cm、およびその他の単位で特定の値を使用して、要素の外側の余白のサイズを定義します。これは負になる可能性があり、デフォルト値は 0px です。 |
% | 親要素の幅のパーセンテージに基づいて余白を定義します。負の値を指定できます |
inherit | 親要素から margin プロパティの値を継承する |
【例】margin-top、margin-bottom、margin-right、margin-leftのプロパティを使って要素の外余白を4方向に設定する。
<!DOCTYPE html>
<html>
<head>
<style>
div.box-one {
border: 1px solid red;
display:inline-block; /*要素をインライン要素に変換*/
}
div.box-two {
/*視覚的な効果をより明確にしたため、要素に上部境界線と背景色を設定*/
border: 1px solid black;
background: #CFF;
width: 200px;
height: 80px;
margin-top: 10px;
margin-right: 1em;
margin-left: 1cm;
}
div.box-three {
/*視覚的な効果をより明確にしたため、要素に上部境界線と背景色を設定*/
border: 1px solid #CCC;
background: #CCC;
width: 180px;
height: 100px;
margin-top: 10px;
margin-bottom: 1em;
margin-right: 10px;
margin-left: 1cm;
}
</style>
</head>
<body>
<div class="box-one">
<div class="box-two">
margin-top: 10px;<br>
margin-right: 1em;<br>
margin-left: 1cm;
</div>
<div class="box-three">
margin-top: 10px;<br>
margin-bottom: 1em;<br>
margin-right: 10px;<br>
margin-left: 1cm;
</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
ここで、margin 属性について具体的に説明する必要があります.他の属性とは異なり、margin 属性は 1 ~ 4 個のパラメーターを受け入れることができます (パラメーターはスペースで区切られます):
- パラメータを 4 つ指定すると、要素の 4 方向の余白が上、右、下、左の順に適用されます。
- 3 つのパラメーターが指定されている場合、最初のパラメーターは要素の上の余白に作用し、2 番目のパラメーターは要素の左右の余白に作用し、3 番目のパラメーターは要素の下の余白に作用します。
- 2 つのパラメーターが指定されている場合、最初のパラメーターは要素の上下の余白に作用し、2 番目のパラメーターは要素の左右の余白に作用します。
- パラメーターが 1 つだけ指定されている場合、この値は要素の外側のマージンに対して、上、下、左、右の 4 方向に作用します。
[例] margin属性を使用して要素の外側の余白を設定する:
<!DOCTYPE html>
<html>
<head>
<style>
div.box-one {
border: 1px solid red;
display:inline-block; /*要素をインライン要素に変換する*/
}
div.box-two {
/*効果をより明確にするため、上部の境界線と背景色を設定している*/
border: 1px solid black;
background: #CFF;
width: 200px;
height: 100px;
margin: 10px 1em;
}
div.box-three {
/*効果をより明確にするため、上部の境界線と背景色を設定している*/
border: 1px solid #CCC;
background: #CCC;
width: 150px;
height: 50px;
margin: 10px 0px 1ex 1em;
}
</style>
</head>
<body>
<div class="box-one">
<div class="box-two">margin: 10px 1em;</div>
<div class="box-three">margin: 10px 0px 1ex 1em;</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
マージン崩壊
マージンの縮小とは、隣接する 2 つ以上のマージンが垂直方向にマージされて 1 つのマージンになることを意味します。マージンの崩壊について注意すべき点がいくつかあります。
- マージンの崩壊は、ブロック レベルの要素でのみ発生します。
- フロート要素のマージンは、いかなるマージンでも折りたたまれません。
- オーバーフロー属性が設定され、visible 以外の値を持つブロック レベルの要素は、その子要素でそのマージンを縮小しません。
- 絶対配置された要素のマージンは、任意のマージンで折りたたまれません。
- ルート要素 (例:
<body>
) のマージンは、他のマージンと一緒に折りたたまれません。
1) 2 つの隣接する兄弟要素の間:
- 隣接する 2 つの要素の外側の余白の値が両方とも正の場合、2 つの要素間の実際の距離は 2 つの外側の余白の大きい方になります。
- 隣接する 2 つの要素の外側の余白の値が両方とも負の場合、2 つの要素間の実際の間隔は 2 つの外側の余白の小さい方になります。
- 隣接する 2 つの要素のマージン値の一方が正で、もう一方が負の場合、2 つの要素間の実際の距離は 2 つのマージンの合計になります。
2) 親要素とその子要素の間: (注: 親要素は境界線とパディングを定義できず、親要素と子要素の間に他の要素があってはなりません)
- 親マージンと子マージンの両方が正の場合、折りたたまれたマージンは 2 つのマージンのうち大きい方になります。
- 親マージンと子マージンの両方が負の場合、折り畳まれたマージンは 2 つのマージンのうち小さい方になります。
- 親要素と子要素の余白値の一方が正の数で、もう一方が負の数の場合、折り畳まれた余白は 2 つの余白の合計です。
「CSS マージン (外側のマージン)」についてわかりやすく解説!絶対に観るべきベスト2動画
【HTML入門講座】marginとpaddingの違いをマスターする!2種類の余白指定。
CSS Margin