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

How surprising! I spent Friday, Saturday, and Sunday thinking about almost the 
same thing. (I was trying to provide the functionality tables provide, but 
separated from the <table> element. I have several other proposals, but will 
send them separately.)

My suggested solution was:

margin-collapse: normal | none | min | max

normal -- use normal margin collapse behaviors.
none -- no collapse, use both full margins.
min -- use only minimum (smallest) margin.
max -- use only maximum (largest) margin.

To allow different behaviors for vertical and horizontal directions, I would 
like to see margin-collapse set both (x and y directions), and 
margin-collapse-x, margin-collapse-y, could set horizontal and vertical  separately.

To handle the case where adjacent elements (left-right or top-bottom) have 
different margin-collapse styles, some disambiguating rule needs to be 
formulated. I am currently considering (mostly because it is simple) the FIRST 
element's style applies. (First means the left in left-right or top in top-bottom.)

If there is no margin to collapse (start or end of a row), the padding of the 
parent takes over. Would the padding be added to the margin or should the margin 
collapse there as well?

It would seem that there is much overlap between our suggestions, but also some 
differences. How can we get these differences resolved (and things we have 
overlooked, which will need fixing in the future), and how can we get this into 
the specification?


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

-- 
James Elmore
22162 Windward Way
Lake Forest, CA 92630
Home	(949) 830-9534
Email	James.Elmore@cox.net

Received on Monday, 18 June 2007 15:29:10 UTC