On Mon, Oct 28, 2013 at 4:43 PM, Robert Hogan <robhogan@gmail.com> wrote:
> HI Alan,
>
> On 28 October 2013 14:27, Alan Gresley <alan@css-class.com> wrote:
> > Sometimes it helps to have a peak (see below code) to understand where
> > something is located if it could seen. The self-collapsing-with-clearance
> > element does not have any collapsing margins.
> >
>
> That seems like a controversial suggestion, the div is clearly
> self-collapsing so must have a collapsed margin value of 0. Can you
> explain why its top and bottom margins do not collapse with each
> other?
>
> <div id="self-collapsing-with-clearance" style="clear:
> both;margin-top: -40px; margin-bottom:40px;"></div>
>
I agree that we have collapsing here, even if this is not particularly
evident.
The collapsing is more evident in case of same sign for the two margins,
like in the mentioned tests.
Or, wanting to use negative values in something like
<div class="parent">
<div class="float" style="float:left; height: 100px; width: 100px;
background-color:blue;"></div>
<div class="self-collapsing-with-clearance" style="clear: both;
margin-top: -40px; margin-bottom:-90px;"></div>
<div class="following-sibling">Text</div>
</div>
Here "following-sibling" starts at 50px from the top of the float, and this
cannot be explained without collapsing.
So, while I can agree with Alan that
"a margin top will not have any effect on the position of the top border
edge of an element with clearance",
the margin top can still have an effect (due to self-collapsing) on what
follows.
Bruno