マージン merge_html/css_WEB-ITnose

前提

通常のドキュメントフローでは、垂直方向に隣接する余白のみが結合されます。

インラインボックス、フローティングボックス、絶対配置の間の余白はマージされません。

1. 隣接する要素には複数のマージンがあります

1 <ul>2     <li>line 1</li>3     <li>line 2</li>4 </ul>5 <h3 id="This-is-h-line">This is h3 line.</h3>

1 ul{margin-bottom:15px;}2 li{margin-top:10px;margin-bottom:20px;}3 h3{margin-top:28px;}

ul 下のマージンは 15px、li 下のマージンは 20px、h3 上のマージンは 28px、マージ時に最大マージンが取られます。のmargins 加算ではなく値であるため、行 2 と h3 の間の距離は 28px になります。

注: ul に境界線を追加すると、li の下のマージンが ul の内側に配置されます。このとき、ul と h3 の間のマージのみが発生します。

ul と h3 のマージンが両方とも負の場合、絶対値が最大の負のマージンと最大の正のマージンを加算して間隔を取得します。

2. block 要素にはブロック要素が含まれます (親要素はパディングやボーダーを設定しません)

1 <div id="outer">2     <div id="inner"></div>3 </div>

 1  #outer{ 2    width:200px; 3    height:100px; 4    background:rgb(245,138,158); 5    margin-top:20px; 6 } 7 #inner{ 8    width:50px; 9    height:50px;10    background:rgb(147,172,213);11    margin-top:10px;12 }

inner は期待どおりに外側に対して 10px 沈みませんが、残ります。外側の位置は比較的変化せず、外側全体が 10px 沈みます。このとき、外側の上余白を20pxに設定すると、どちらか大きいほうが全体の外側が20px低くなります。

親要素にボーダー (またはパディング) を追加して内部要素のマージンを区切る場合、マージンのマージは行われません:

1 #outer{border:1px Solid rgb(147,172,213);}

注: ブロック要素にインライン要素が含まれている場合、マージンのマージは行われません (水平方向のセンタリングと垂直方向のセンタリングを参照)。

3. 空の要素の上下のマージンがマージされます

1 <div class="blank"></div>2 <div class="focus"></div>3 <div class="blank"></div>

1 .blank{2    width:100px;3    height:50px;4    background:rgb(245,138,158);5 }6 .focus{margin:10px 0 20px 0;}

空白にマージンがある場合、その間隔は 20px になります。マージ。複数の空の要素にも同じことが当てはまります。

参考資料

CSSマージンマージ

CSSマージンマージの詳しい説明