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:54:45 -0700
Message-Id: <38D8560C-555A-4216-85E0-C36486B7F1F5@apple.com>
Cc: www-style@w3.org
To: Nicholas Retallack <nickretallack@gmail.com>

This obviously was only about the vertical direction, since margins  
don't "collapse" in the horizontal direction, so I guess it's not  
exactly like what you suggested. :)

dave

On Jun 17, 2007, at 5:50 PM, David Hyatt wrote:

> 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:55:14 GMT

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