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

Thanks for enlightening me with this valuable information, Anton!

To be honest: Until today I believed that the <ul> / <li> behaviour you 
described was actually the case (the non-collapsing version). I'm actually 
using this feature on a daily basis in MS Word to have a list separated from 
the other paragraphs. To me this behaviour seemed natural.

But, OK, I apprehend that other may think different.

+1 for having something learned today.

Cheers,
Axel

---------------
"Anton Prowse"  schrieb im Newsbeitrag news:566833B3.80602@moonhenge.net...

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 Thursday, 10 December 2015 00:10:06 UTC