Re: Inconsistent position:relative behaviour

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

Received on Sunday, 13 February 2011 03:36:21 UTC