On 2/12/11 1:05 PM, Markus Ernst wrote:
> I must admit I was not aware of what this means before. Is there any use case that makes margin collapsing between parent and child elements desirable?
Yes. Consider this markup:
<section>
<h1>Heading 1</h1>
<p>Text 2</p>
</section>
<section>
<h1>Heading 2</h1>
</section>
And some reasonable styles for paragraphs, headings and sections:
section h1 { margin: .83em 0; font-size: 1.5em; }
p { margin: 1em 0; }
(I copied those from Gecko's UA stylesheet).
If child and parent margins didn't collapse, there would be 2.25em (in
default font em) of vertical space between the end of "text 2" and the
beginning of "Heading 2", whereas the desired amount of vertical space
in this case is 1.25em.
And things get even worse in that situation if <section> itself has a
margin.
> I'd actually suggest to drop this. Making a margin of a child element affect the behaviour of the parent looks highly counterintuitive to me.
It's not all that counterintuitive for _document_ layout. For a lot of
the other things people end up using CSS for, it's a bit weird.
> - Applying a border or padding to the parent element will make the total height more than 100%, resulting in a permanent scrollbar.
Not if you subtract that same length from the margin, fwiw...
I agree this is suboptimal; I believe there have been proposals for
less-hacky support for better control over margin collapsing.
> - Applying clear:both to the child element, as implied by the wording
> of the spec, does not help in any of the 4 browsers I tested with.
The interaction of "clear" and margin-collapse is ... complicated. Just
applying clear when there's nothing to clear doesn't change collapsing
behavior last I checked.
Fwiw, setting the parent to overflow:auto would prevent margin collapse
too, at the possible cost of scrollbars you may not want.
-Boris