How do I uncollapse a margin? [duplicate]
Solution 1:
well you need something in between to "break" the collapsing.
my first thought was to use a div with display:none set in between, but that doesn't seem to work.
so I tried:
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
which seems to do the job nicely (at least in firefox, don't have internet explorer installed here to test it...)
<html>
<body>
<div style="margin: 100px;">.</div>
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
<div style="margin: 100px;">.</div>
</body>
</html>
Solution 2:
From IE8 you could do:
<div class="uncollapse-margins">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
<p>Lorem ipsum dolor sit amet.</p>
</div>
With CSS:
.uncollapse-margins:before,
.uncollapse-margins:after
{
content: "\00a0"; /* No-break space character */
display: block;
overflow: hidden;
height: 0;
}