Re: [css3-box] Collapsing Margins - Odd Behaviour

On 09/12/2015 13:17, Axel Dahmen wrote:
> The current definition of collapsing margins yields a number of 
> unexpected results 
> (http://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down).
>
> I believe to remember the original idea of collapsing margins to be 
> constrained to a bottom and a following top margin to be the only part 
> of collapsing, but not a top margin with another top margin.
>
> What's the idea behind having unrelated margins collapse?

It's what you'd typically want in block-flow ("traditional document") 
layout.

A margin is pretty much a way of saying "I want at least this much space 
between this element and the nearest bit of content, but not more unless 
other elements want more".  So if you've got <p>s inside a <div>, 
typically the <p>s would have some positive top and bottom margin to 
separate them from each other. The <div> would typically not have any 
margin, but there's no reason why you couldn't add it if you wanted to 
ensure that your sections were at least X apart.  And if you /did/ add 
it, you wouldn't expect the <p>s to suddenly become extra-separated from 
the div's extents, since that would result in even more space between 
the last <p> of the first <div> and the first <p> of the second <div> 
than any of those elements themselves wanted.

To be fair, this tends to be much more obvious when thinking about other 
element types, and <ol> and <li> are the canonical examples here.  You 
typically wouldn't want the top margin of the first <li> and the bottom 
margin of the last <li> to be added (summed) to the margins of the <ol>; 
you'd expect them to "blend" with it.

As stated in the resource you link to, margin collapsing is inhibited by 
a number of other CSS properties/values.  Obviously, it doesn't always 
make sense to float or absolutely position something just to get the 
side-effect of inhibiting margin collapsing.  But there are other 
properties/values which are less aggressive; if I recall correctly, 
overflow:auto is a reasonably benign choice if there's no explicit 
height restriction (so that vertical overflow shouldn't occur) and no 
great lack of horizontal space.

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

Received on Wednesday, 9 December 2015 13:59:48 UTC