なぜこ要素につけたmarginが親にも影響してしまうのか理由が知りたいです。

Question

   <div class="a">
      <p class="p">あああ</p>
    </div>

.a {
  width: 400px;
  height: 400px;
  background: red;
  
}

.p {
margin-top:50px;
  background: blue
}

子要素につけたら子要素だけ上に余白を確保し実際には下にずれると思うのですが、親のブロックまで下にずれるのはどういうわけでしょうか。

Comments

[m.ts10806]

提示されたコードにはmarginが一切指定されてないようですが？
再現するコードを提示してください。

Answer 1

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

上記のより引用

親要素と先頭・末尾の子要素

ブロックが、その margin-top とその先頭の子要素の margin-top を分けられるような、ボーダー、パディング、インラインコンテンツ、フロートの解除 (clear) のいずれも持たない場合、もしくは、ブロックがその margin-bottom とその末尾の子要素の margin-bottom を分けられるような、ボーダー、パディング、インラインコンテンツ、高さ (height)、高さの最小値 (min-height) のいずれも持たない場合、マージンは相殺されます。相殺されたマージンは最終的に、親要素の外側に出ます。