ホーム プログラミング言語 Web関連 css3 CSS マージン (外側のマージン)

CSS マージン (外側のマージン)

 
 
要素のマージンとは、要素の境界線の周りの空白の領域です (境界線を除く)。この領域は 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-top、margin-bottom、margin-right、margin-left プロパティのデモ
図: margin-top、margin-bottom、margin-right、margin-left プロパティのデモ

ここで、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> 

実行結果は次の図のとおりです。

図: margin プロパティのデモ
図: margin プロパティのデモ

マージン崩壊

マージンの縮小とは、隣接する 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