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
Kevin Powell
Kevin Powell•2y ago
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 ...
get out...!
get out...!•2y ago
I do this using border property hope help someone and make the border transparent
Chris Bolson
Chris Bolson•2y ago
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)
get out...!
get out...!•2y ago
I get that I`m just telling what hack, am using
Kevin Powell
Kevin Powell•2y ago
Of you really want to avoid it, instead of a transparent border, you can just use display: flow-root
Want results from more Discord servers?
Add your server