W3C home > Mailing lists > Public > www-style@w3.org > February 2011

Re: Inconsistent position:relative behaviour

From: Markus Ernst <derernst@gmx.ch>
Date: Sun, 13 Feb 2011 12:03:05 +0100
Cc: www-style@w3.org
Message-ID: <20110213110305.270080@gmx.net>
To: Boris Zbarsky <bzbarsky@MIT.EDU>

-------- Original-Nachricht --------
> Datum: Sat, 12 Feb 2011 22:35:46 -0500
> Von: Boris Zbarsky <bzbarsky@MIT.EDU>

> 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 see.

> > 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.

I'd certainly appreciate this kind of control. Maybe something in the form of:
#containerId { margin-collapse:separate; }

>  > - 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.

In my naive understanding, the spec implies that a "clear" property with a value other than "none" would turn off margin collapsing:

"The top margin of an in-flow block box is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance."

It might be worth to spend some more words on how undesired margin-collapsing can be prohibited, though the spec might be perfectly understandable here for anyone having a full understanding of "clearance". Authors are encouraged to read the spec for reference, and most authors have a less thorough understanding of the details.

Schon gehört? GMX hat einen genialen Phishing-Filter in die
Toolbar eingebaut! http://www.gmx.net/de/go/toolbar
Received on Sunday, 13 February 2011 11:03:40 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:56 UTC