W3C home > Mailing lists > Public > www-style@w3.org > June 2007

Re: [CSS21] Margin-Collapse Property to fix inconsistency

From: David Hyatt <hyatt@apple.com>
Date: Sun, 17 Jun 2007 17:50:31 -0700
Message-Id: <EB5EB8BF-7043-4A3E-935A-BF1FA40B88FC@apple.com>
Cc: www-style@w3.org
To: Nicholas Retallack <nickretallack@gmail.com>

Safari actually supports exactly this already.  You can try it out  
either in nightlies (or in the 3.0 beta).  The syntax I used was a  
little different though.  I implemented:

-webkit-margin-top-collapse
-webkit-margin-bottom-collapse

and

-webkit-margin-collapse (which sets both)

The values I chose were

separate - "Don't collapse"
collapse - "Do collapse"
discard - "Throw the margin away"

Discard actually allows for the modeling of the quirky behavior you  
see in browsers where margins disappear in table cells in quirks mode.

Anyway, I completely agree that this should be standardized (and am  
flexible regarding the syntax).

dave

On Jun 16, 2007, at 9:41 PM, Nicholas Retallack wrote:

>
> Margin collapsing has an inconsistency I've never really seen the
> reasoning behind-- it only works vertically not horizontally, which
> seems an arbitrary decision, and also it can't be turned off.  I would
> like to suggest that margin collapsing be something we have control
> over and can disable.  The property could look something like this:
>
> margin-collapse: vertical | horizontal | both/all | none
>
> Horizontal margin collapse would go well with horizontal shrinkwrap
> styles like display:table-cell/list-item and float.  You could also
> make a gallery of equally-spaced floating thumbnails or boxes and only
> have to specify one margin (margin: 4px) instead of having to halve it
> in the horizontal direction since those margins don't collapse
> (margin: 4px 2px).
>
> For extra coolness, have it support top, bottom, left, and right in
> there as well, combinatorily, so a user could do this to create a
> gallery of tiles of content, eliminating extra margin space on the
> right and bottom as it grows and floats:
>
> ..tile { margin-collapse: top left; margin: 1em 0 0 1em; float:left }
>
> Also I'm quite sure many users would be very happy to do this:
>
> * { margin-collapse: none }
>
>
Received on Monday, 18 June 2007 00:51:00 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:51 GMT