0

https://codepen.io/donghoon759/pen/xxaOEgo

` // html DIV P

// css .upper { background: yellow; margin: 20px; } 
.lower {
  background: red;
  margin: 20px;
}

`

div and p has "margin: 20px" each. But when I inspect the elements, the gap between two elements is only "20px". When I change the display value of div to "inline-block", it works as intended. I wonder the reason.

The gap between two elements becomes "40px".

Donghoon Song
  • 21
  • 1
  • Because margins are collapsed between block level elements https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing _If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse._ You can wrap them in a flex column container, and you'll get the desired result – Ja Da Feb 23 '23 at 09:45

0 Answers0