Effect of border/padding and nested margins on outer block layout

[Mark Shroyer]

I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

Thanks!
Mark

--
Mark Shroyer
http://markshroyer.com/contact/

[Gus Richter]

Mark Shroyer wrote:

I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

_Collapsing Margins_
Most people think of margin collapsing happening when one block level
element follows another. However margins collapse whenever one margin
comes into contact with an adjacent margin. This means that margins can
also collapse when one element is contained within another.

To Prevent Adjacent Margins from Collapsing one can make them no longer
Adjacent by either; adding a border or adding some padding.

Read up on it in the CSS 2.1 Specifications.
Search the web for documents describing it.

--
Gus

[dorayme]

In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:

I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

Best I can do for the moment:

<http://netweaver.com.au/alt/shroyer.html>

--
dorayme

[Ben C]

On 2008-04-16, dorayme <do************@optusnet.com.auwrote:

In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:

>I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

Best I can do for the moment:

<http://netweaver.com.au/alt/shroyer.html>

Good explanation. I think the main point to note here is that when two
box's top margins collapse, it also follows that the top edges of those
two boxes end up in the same place.

Yellow's top margin (of 0) collapses with red's. The result is 16px.
That needs to be between the top of red and the bottom of blue since
it's red that wants this top margin.

But now since the top of yellow has to be aligned with the top of red,
yellow has to move down by 16px.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-04-16, dorayme <do************@optusnet.com.auwrote:

In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:

I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

Best I can do for the moment:

<http://netweaver.com.au/alt/shroyer.html>

Good explanation. I think the main point to note here is that when two
box's top margins collapse, it also follows that the top edges of those
two boxes end up in the same place.

Yellow's top margin (of 0) collapses with red's. The result is 16px.
That needs to be between the top of red and the bottom of blue since
it's red that wants this top margin.

But now since the top of yellow has to be aligned with the top of red,
yellow has to move down by 16px.

It is indeed interesting quite how one can look at these things. I try
to think of some way that I will actually be able to remember. Others
will have more technically looking explanations (things that seem closer
to CSS 2.1 specs). Love these questions because they force us to think
about a few things! <g>

--
dorayme

[dorayme]

In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:

http://markshroyer.com/files/css-example.html

I meant to mention that this was a very nicely presented question, Mark!
In Safari, the javascript feature worked one way but not the other. In
FF, both ways worked. (You could go from borderless to bordered example,
but not vice versa. Refresh page got the reverse better!) Nice touch but
also an illustration of the downside of js across all browsers and
platforms.

Must update to Safari 3 soon!

--
dorayme

[Gus Richter]

dorayme wrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

>On 2008-04-16, dorayme <do************@optusnet.com.auwrote:

>>In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:

I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

Best I can do for the moment:

<http://netweaver.com.au/alt/shroyer.html>

Good explanation. I think the main point to note here is that when two
box's top margins collapse, it also follows that the top edges of those
two boxes end up in the same place.

Yellow's top margin (of 0) collapses with red's. The result is 16px.
That needs to be between the top of red and the bottom of blue since
it's red that wants this top margin.

But now since the top of yellow has to be aligned with the top of red,
yellow has to move down by 16px.

It is indeed interesting quite how one can look at these things. I try
to think of some way that I will actually be able to remember. Others
will have more technically looking explanations (things that seem closer
to CSS 2.1 specs). Love these questions because they force us to think
about a few things! <g>

Of course there is also the fact that blue's bottom margin is adjacent
with your "family unit of yellow parent with red child" left to also be
considered.

Since blue's bottom margin is zero and the "family unit's" top margin is
16px, it collapses to 16px. If blue's bottom margin were greater than
the "family unit's" top margin (>16px), the result would be collapsed to
blue's greater bottom margin value.

--
Gus

[Mark Shroyer]

In article <do**********************************@web.aioe.org >,
dorayme <do************@optusnet.com.auwrote:

In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:

I just noticed an unintuitive aspect of how nested blocks are positioned
under a specific set of conditions, and although this is ostensibly
correct behavior (unless Firefox, Safari, and Opera are all three
simultaneously wrong about this particular quirk), I'm having a hard
time figuring out the underlying premise of this behavior.

Essentially, when a nested block has a non-zero top margin greater than
that of its containing block, the containing block is positioned in an
unexpected (to the naive developer) manner when both its border-top and
padding-top properties are zero... but a picture is worth a thousand
words, so here is an interactive example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...
any hints?

Best I can do for the moment:

<http://netweaver.com.au/alt/shroyer.html>

Great explanation, thanks!

--
Mark Shroyer
http://markshroyer.com/contact/

[dorayme]

In article <Io******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

dorayme wrote:

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-04-16, dorayme <do************@optusnet.com.auwrote:
In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:

I just noticed an unintuitive aspect of how nested blocks are positioned
...example of the phenomenon:

http://markshroyer.com/files/css-example.html

I get the feeling that there's some fundamental concept I'm missing
here, but I'm not having much luck searching for the answer on my own...

any hints?

Best I can do for the moment:

<http://netweaver.com.au/alt/shroyer.html>
Good explanation. I think the main point to note here is that when two
box's top margins collapse, it also follows that the top edges of those
two boxes end up in the same place.

Yellow's top margin (of 0) collapses with red's. The result is 16px.
That needs to be between the top of red and the bottom of blue since
it's red that wants this top margin.

But now since the top of yellow has to be aligned with the top of red,
yellow has to move down by 16px.

It is indeed interesting quite how one can look at these things.

....

Of course there is also the fact that blue's bottom margin is adjacent
with your "family unit of yellow parent with red child" left to also be
considered.

Since blue's bottom margin is zero and the "family unit's" top margin is
16px, it collapses to 16px. If blue's bottom margin were greater than
the "family unit's" top margin (>16px), the result would be collapsed to
blue's greater bottom margin value.

Indeed. There are the internal family problems to be sorted out and then
the *various ones* to do with relations to strangers. It is always a
toss up as to which are the most complex.

(Did I ever tell you, Gus, about the bloke who put up a sign on his
front door saying, "Everyone welcome - except family members")

--
dorayme

[Gus Richter]

dorayme wrote:

In article <Io******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

>dorayme wrote:

>>In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-04-16, dorayme <do************@optusnet.com.auwrote:
In article <us*******************************@snap.homestarmy .net>,
Mark Shroyer <us*********@markshroyer.comwrote:
>
>I just noticed an unintuitive aspect of how nested blocks are positioned
>...example of the phenomenon:
>>
>http://markshroyer.com/files/css-example.html
>>
>I get the feeling that there's some fundamental concept I'm missing
>here, but I'm not having much luck searching for the answer on my own...
>>
>any hints?
>>
Best I can do for the moment:
>
<http://netweaver.com.au/alt/shroyer.html>
Good explanation. I think the main point to note here is that when two
box's top margins collapse, it also follows that the top edges of those
two boxes end up in the same place.

Yellow's top margin (of 0) collapses with red's. The result is 16px.
That needs to be between the top of red and the bottom of blue since
it's red that wants this top margin.

But now since the top of yellow has to be aligned with the top of red,
yellow has to move down by 16px.
It is indeed interesting quite how one can look at these things.

...

>Of course there is also the fact that blue's bottom margin is adjacent
with your "family unit of yellow parent with red child" left to also be
considered.

Since blue's bottom margin is zero and the "family unit's" top margin is
16px, it collapses to 16px. If blue's bottom margin were greater than
the "family unit's" top margin (>16px), the result would be collapsed to
blue's greater bottom margin value.

Indeed. There are the internal family problems to be sorted out and then
the *various ones* to do with relations to strangers. It is always a
toss up as to which are the most complex.

Actually I don't much care for this "family" thing.
The fact is that there are three adjacent margins - three margins in
contact with each other - they all collapse to that of the largest one.

(Did I ever tell you, Gus, about the bloke who put up a sign on his
front door saying, "Everyone welcome - except family members")

Bloke? What's a bloke? Chap? What's a chap?
I think that for non-british types (i.e. North American and god knows
where else) "fellow" may be used, although I prefer "guy".

Do you people down under also use torch for flashlight and knock up for
wake up?

--
Gus

[dorayme]

In article <7M******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

Actually I don't much care for this "family" thing.
The fact is that there are three adjacent margins - three margins in
contact with each other - they all collapse to that of the largest one.

Fair enough. All clear and simple then, there are 3 adjacent margins and
they all collapse to the largest one and this explains everything
including the meaning of the universe.

And now to other interesting matters:

(Did I ever tell you, Gus, about the bloke who ...

Bloke? What's a bloke? Chap? What's a chap?
I think that for non-british types (i.e. North American and god knows
where else) "fellow" may be used, although I prefer "guy".

New Zealanders use "Joker". This joker did this and that joker came
along and did that.... At least my NZ friends talk like this.

Do you people down under also use torch for flashlight

I use "torch". I think most Australians do too. Our torches are reliable
you see and don't go on and off all the time. You know what I mean,
mate? Beaut!

>and knock up for wake up?

No, "knock up" has a different meaning in these parts. When a bloke
knocks up a sheila, she wakes up one day with a bun in the oven. Know
what I mean?

--
dorayme

[rf]

dorayme <do************@optusnet.com.auwrote in news:doraymeRidThis-
7B*******************@web.aioe.org:

In article <7M******************************@golden.net>,
Gus Richter <gu********@netscape.netwrote:

>Do you people down under also use torch for flashlight

I use "torch". I think most Australians do too. Our torches are reliable
you see and don't go on and off all the time. You know what I mean,
mate? Beaut!

Besides, imagine using a torch that had "flash" in its name :-)

--
Richard
Killing all threads involving google groups
The Usenet Improvement Project: http://improve-usenet.org

[Gus Richter]

dorayme wrote:

And now to other interesting matters:

>>(Did I ever tell you, Gus, about the bloke who ...

Bloke? What's a bloke? Chap? What's a chap?
I think that for non-british types (i.e. North American and god knows
where else) "fellow" may be used, although I prefer "guy".

New Zealanders use "Joker". This joker did this and that joker came
along and did that.... At least my NZ friends talk like this.

>Do you people down under also use torch for flashlight

I use "torch". I think most Australians do too. Our torches are reliable
you see and don't go on and off all the time. You know what I mean,
mate? Beaut!

>and knock up for wake up?

No, "knock up" has a different meaning in these parts. When a bloke
knocks up a sheila, she wakes up one day with a bun in the oven. Know
what I mean?

This joker, this guy, this old fart, etc. are lead ins to jokes, true.

Re. the last; understood all, even the sheila, after all I know that
Waltzing Matilda has nothing to do with any girl or about dancing.

Funny this linguistic thing, gday mate.

--
Gus

[rf]

Gus Richter <gu********@netscape.netwrote in
news:z_******************************@golden.net:

Funny this linguistic thing, gday mate.

G'day is usually used when greeting a bloke, not when wandering off. Hooroo
is more appropriate then.

--
Richard
Killing all threads involving google groups
The Usenet Improvement Project: http://improve-usenet.org

[Gus Richter]

rf wrote:

Gus Richter <gu********@netscape.netwrote in
news:z_******************************@golden.net:

>Funny this linguistic thing, gday mate.

G'day is usually used when greeting a bloke, not when wandering off. Hooroo
is more appropriate then.

Thanks for that and hooroo to this thread.

--
Gus