Re: Control over collapsing margins

2009/4/28 Niels Matthijs <niels.matthijs@internetarchitects.be>:
>
> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On
> Behalf Of Anton Prowse
> Sent: 23 April 2009 14:57
> To: www-style@w3.org
> Cc: www-style@w3.org
> Subject: Re: Control over collapsing margins
>
>> We really need some concrete real-world examples and detailed
> use-cases
>> in order to assess the best way forward.  Trouble is, although I've
>> needed to suppress margin collapsing lots of times, I struggle to
>> remember now the exact reason and so I can't propose any use-cases off
>
>> the top of my head. I would guess many others are in the same boat;
> this
>> issue tends to be very situation-specific.
>
>> Cheers,
>> Anton Prowse
>> http://dev.moonhenge.net
>
> 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. It is of course
> highly dependent on your way of coding, but like I said earlier, margins
> are really the way to go if you want to achieve flexible css code.

For the moment, you can go with overflow:auto on the .box, to make it
a BFC and avoid margin-collapsing. You just need to set height always
to auto (to avoid overflow).
In the future, I think that something similar to hasLayout (to create
arbitrary BFCs) should be introduced.

Floats are still a problem, but if you're visually distinguishing the
box from its parent, probably you want floats inside it. On the other
hand, setting a "layout-mode:block-formatting-context" should help in
many float-based layouts (when you're struggling with backgrounds that
don't extend to the bottom of the highest float)

> I know this problem isn't all that flashy or cool as SVG graphics or any
> other nifty css 3 feature, but it seems that we would actually benefit
> from a more solid base than excessive css 3 features while we can't even
> control our margins.
>
> Greets,
> Niels Matthijs
>

Received on Tuesday, 28 April 2009 13:36:55 UTC