margin-topについて

Question

下記コードにつきまして
親要素のoverflow:hiddenを削除すると
親要素を突き抜けて?余白がかかってしまいます。

調べてみて親要素にoverflow:hiddenを使うと
子要素にmargin-topがかかるようなったのは良いのですが
いまいち納得できずにいます。
具体的な理由があればと思い質問させていただきました。
お手数おかけ致しますが、宜しくお願い致します。

<div class="wrapper">
  <div class="content"></div>
</div>

.wrapper{
  width: 100px;
  height: 100px;
  background-color: #ddd;
  overflow:hidden;

  .content{
    width: 50px;
    height: 50px;
    background-color:red;
    margin-top: 20px;
  }
}

Answer 1

この現象は「marginの相殺」という仕様によるものです。
たとえば

（1）隣り合う要素のmargin-bottomとmargin-top
（2）padding・borderなどを持たない親要素のmargin-topと子要素のmargin-top

といったものは、相殺されて大きい方の値にまとめられます。
今回は(2)の現象が起こっている状態です。
親要素.wrapperにはmargin・padding・borderがいずれも設定されていませんが、
その状態で子要素にmargin-topがつくと、親要素のmarginとまとめられて、親要素の外側に設定される仕様です。（margin-bottomも同じです）

本当はもう少しいろいろと細かい条件があったりして割と難しいので、
詳しくはこちらのサイトなどを参考にしてください。

・マージンの相殺
・(CSSのmarginが難しい)
・[CSSのハマリどころ] marginの相殺

他にも「marginの相殺」で検索すれば山ほど情報が出てきます。

Comments

[l_l]

ご回答とURLの展開ありがとうございます。