disappearing margins?

[bugbear]

I am reading (and re-reading) this article on
alistapart.

http://www.alistapart.com/articles/customcorners/

I understand (or think I understand) all the stuff
about the sliding, overlapping graphics.

I now have pages that use CSS ideas ripped
from this article, with nice rounded corners
on some elements. So the pragmatic side
of me is content (so's my boss ;-)

But the perfectionist side of me is unhappy.

I don't understand is what happens between
stage 2 and stage3.

http://www.alistapart.com/d/customcorners/step2.html

http://www.alistapart.com/d/customcorners/step3.html

Stage 2 simply puts a 1 pixel border (of
varying colours) on each tag, so one can
more easily see what's going on.

And one of the things this reveals is
that the upper edges of the
borders of "Article" and "Article h3"
are not colinear. There's many
pixels between the upper border of Article
(coloured Red) and the upper Border
of "Article h3" (coloured blue).

And yet, when we move to stage3 (removing the borders,
adding the graphics), the graphics associated
with "Article" and "Article h3" line up nicely.

Flicking between the 2 pages reveals that the
"Article Header" text moves up the page a goodly
amount.

Can someone explain why?

BugBear

[Steve Pugh]

Re: disappearing margins?

bugbear <bugbear@trim_p apermule.co.uk_ trim> wrote:
[color=blue]
>http://www.alistapart.com/d/customcorners/step2.html
>http://www.alistapart.com/d/customcorners/step3.html
>
>Stage 2 simply puts a 1 pixel border (of
>varying colours) on each tag, so one can
>more easily see what's going on.
>
>And one of the things this reveals is
>that the upper edges of the
>borders of "Article" and "Article h3"
>are not colinear. There's many
>pixels between the upper border of Article
>(coloured Red) and the upper Border
>of "Article h3" (coloured blue).
>
>And yet, when we move to stage3 (removing the borders,
>adding the graphics), the graphics associated
>with "Article" and "Article h3" line up nicely.[/color]

The border prevents margin collapsing. So the top margin of the <h3>
is inside the <div>. Without the border the margin collapses and
appears outside the <div>.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[bugbear]

Re: disappearing margins?

Steve Pugh wrote:[color=blue]
> bugbear <bugbear@trim_p apermule.co.uk_ trim> wrote:
>
>[color=green]
>>http://www.alistapart.com/d/customcorners/step2.html
>>http://www.alistapart.com/d/customcorners/step3.html
>>
>>Stage 2 simply puts a 1 pixel border (of
>>varying colours) on each tag, so one can
>>more easily see what's going on.
>>
>>And one of the things this reveals is
>>that the upper edges of the
>>borders of "Article" and "Article h3"
>>are not colinear. There's many
>>pixels between the upper border of Article
>>(coloured Red) and the upper Border
>>of "Article h3" (coloured blue).
>>
>>And yet, when we move to stage3 (removing the borders,
>>adding the graphics), the graphics associated
>>with "Article" and "Article h3" line up nicely.[/color]
>
>
> The border prevents margin collapsing. So the top margin of the <h3>
> is inside the <div>. Without the border the margin collapses and
> appears outside the <div>.[/color]

Thanks for that. Following your answer,
a little experimention with extreme margins
showed me (graphically) that you're absolutely
right (which you knew, of course)

BugBear