I have this margin issue
Let first show you code
<body>
<div style="background-color: green; height: 200px;"></div>
<div class="container--wrapper" style="background-color: red;">
<div class="container">
<div class="para" style="margin-top: 20px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ipsam reiciendis veniam. Unde asperiores laboriosam voluptas, eum assumenda dignissimos eius!
</div>
</div>
</div>
</body>
div.container--wrapper have a background color of red and div.para have margin-top of 20px. There seem be some kind of issue, because container div.container--wrapper must be start after the green box, but I picture as you can see there is a gap.
what this issue is ?
I am trying to learn if I am wrong and what this issue is...
5 Replies
Collapsing margins are why it's happening 😄
https://www.youtube.com/watch?v=qKiz9gdJdr8
Kevin Powell
YouTube
The most INFURIATING thing about CSS and how to deal with it!
Collapsing margins are incredibly frustrating when you don't understand them, but once you know how they work, and in what situations, you can find solutions to work around them.
Codepen from this video: https://codepen.io/kevinpowell/pen/NWdOyrP
CSS Working Group Mistakes made in CSS: https://wiki.csswg.org/ideas/mistakes
More information on ...
I do this using border property
hope help someone
and make the border transparent
Kevin has said why this is happening and linked to one of his videos where he explains it in detail.
If you prefer to read about it you can get more info from the mdn website: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
If what you want is a quick fix, one method would be to give your "container--wrapper" an overflow of hidden by adding this
overflow:hidden; . (note - this patch may have unwanted secondary effects later in your code)I get that
I`m just telling what hack, am using
Of you really want to avoid it, instead of a transparent border, you can just use
display: flow-root