This answer aims to add some alternatives for those who need to change the default behavior of the CSS that culminates in margin Collapse.
Alternative 1: hidden element (hack!)
One of the palliative solutions to avoid the effect of margin Collapse is to include a hidden element between the two margin elements.
Example:
<div class="wrapper">
<div class="box"></div>
<div class="hidden">.</div>
<div class="box"></div>
<div class="hidden">.</div>
<div class="box"></div>
</div>
.hidden {
overflow: hidden;
height: 0px;
width: 0px;
}
As for the criticism about creating additional elements, note that even using ::after
or ::before
via CSS also there is a overhead, after all the browser needs to internally create that element. The same goes for other tags that generate additional processing.
In addition, the user has not established a number of elements. One cannot assume that a solution is bad because it is not suitable for thousands of items, when that amount is an exception and not the rule in web development in general. Incidentally, any large amount of items might crash certain systems and we would have to throw away several web frameworks that encapsulate complex components.
Alternative 2: doubling the margin
For those who did not like the first "hack", a more specific alternative solution would increase the lower margin of the elements. To "correct" the remaining margin at the end it is possible to use the last-child
.
The CSS of this case:
.box {
background-color: black;
box-sizing: border-box;
height: 48px;
width: 100%;
margin: 14px 0px 7px 0;
}
.box:first-child {
margin: 7px 0;
}
Well, some of us still did not like this solution, although there is nothing absurd about it. But for those who want to find hair in an egg, I changed it from last-child
for first-child
because apparently in old browsers (IE) may perform better.
Alternative 3: inline-block
The last alternative is to use the suggestion from reply from @bfavaretto.
The reason I didn’t post an alternative using the inline-block
since the beginning is that the browser adds additional spaces between the blocks and ended up not investigating in depth the reason.
But after resurrecting the topic a few months later, I decided to do the research and the solution was, after all, quite simple.
The additional spacing is caused due to the source properties, so a font-size
to solve the problem.
Let’s see:
.box {
background-color: black;
box-sizing: border-box;
height: 48px;
width: 100%;
margin: 7px 0;
display: inline-block;
}
.wrapper {
font-size: 0;
}
Technically the
div
are side by side as they are "block" elements, but as they do not have space to appear side by side, they are visually one under the other with collapsed margins. For that final aspect you want to get, you’ll have to usefloat:left;
to float them to the left, thereby ensuring that the margins are fully respected.– Zuul
Precisely this has to do with the display of the element... http://www.maujor.com/tutorial/propriedade-css-display.php
– Kenny Rafael