Menu
Lately I had problem with margins but I wasn't able to resolve it. My HTML looked like this:
<div class="info-box">Some text</div>
<div class="form">...</div>
CSS:
.info-box{
border-radius: 5px;
border: 1px solid red;
margin-bottom: 20px;
}
.form{
margin-top: 20px;
}
And problem was that margins overlapped each other instead of give 40px distance between two elements.
My question is: why? I found that adding to .info-box overflow:hidden fixed this but maybe there is better way?
529
In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly. This is an interactive element! Instead of sitting 48px apart, their 24px margins merge together, occupying the same space!
How to Avoid Margin Collapse. First, remember that margins should preferably be used to increase the distance between sibling elements, not to create spacing between a child and a parent. If you need to increase space within the Flow layout, reach first for padding if possible.
Again - you have to understand in what way margins are interpreted. Margin refers to another's element position not including its margins. You cannot sum margins.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
