Re: Control over collapsing margins

[Replying to three messages at once]

Niels Matthijs wrote:
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
> Behalf Of Anton Prowse
>> We really need some concrete real-world examples and detailed use-cases
>> in order to assess the best way forward.
> The real world examples are quite simple. Whenever you have a visual box
> only separated by background color (fe, body bg is black, box bg is
> #666) the intended results fails when elements within the visual box are
> positioned using margins.
>
> body {background:#000;}
> body .box {background:#666; margin:1em;}
> body .box>* {margin:1em;}
>
> html example here:
> http://users.telenet.be/onderhond/collapsing_margins.html
>
> This is probably a problem I run into every project.

This is certainly one use case, but I suspect there are other, different
ones.  Our task is to decide whether we only want suppression of margin
collapsing or whether we actually want BFC creation.  The trouble (in
this particular case) with use-cases which are overly abstract and
resemble minimal test-cases is that it's difficult to determine the
practical difference between the two options.  I'd prefer to see full,
real-world examples.


Aryeh Gregor wrote:
> I had exactly this problem just a couple of days ago.  The setup was basically:
>
> <style>
> .announcement { color: white; background: darkred; margin: 1em; width: 100%; }
> </style>
> <div class="announcement">
> <p>Some text goes here!</p>
> <p>Some more text here!</p>
> </div>
>
> The text in the paragraphs ran right up to the top and bottom of the
> red box, which looked very ugly.  I fixed it by adding "padding:
> 0.001px;" to the .announcement rule -- ugly, but it seemed to work.  I
> don't know if there's a nicer way right now that doesn't have side
> effects.  Creating a new BFC would do all sorts of stuff, probably
> including things I didn't want.

Yet possibly including things that you did, even if you may not have
realized it.  The question that leaps to mind is whether you would have
expected your announcement to have enclosed its floated children.


Tab Atkins Jr. wrote:
> Well, in my experience the major effects of creating a BFC are that
> margins won't collapse through them, they contain their descendant
> floats, and they won't overlap sibling floats.  I use them (typically
> through the overflow hack) regularly in my designs for all of those
> reasons.
> 
> Does anyone know of any other 'standard features' of BFCs that I'm missing?

The fourth and final feature is that they provide the scope for the
'clear' property of their dependants.

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Tuesday, 28 April 2009 21:33:47 UTC