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

In article <usenet-mail-E98E25.23043515042008 (AT) snap (DOT) homestarmy.net>,
Mark Shroyer <usenet-mail (AT) markshroyer (DOT) com> 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?

Best I can do for the moment:

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

--
dorayme

On 2008-04-16, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <usenet-mail-E98E25.23043515042008 (AT) snap (DOT) homestarmy.net>,
Mark Shroyer <usenet-mail (AT) markshroyer (DOT) com> 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?


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.

In article <slrng0bfrs.qup.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-16, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <usenet-mail-E98E25.23043515042008 (AT) snap (DOT) homestarmy.net>,
Mark Shroyer <usenet-mail (AT) markshroyer (DOT) com> 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?


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 wrote:

In article <slrng0bfrs.qup.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-16, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <usenet-mail-E98E25.23043515042008 (AT) snap (DOT) homestarmy.net>,
Mark Shroyer <usenet-mail (AT) markshroyer (DOT) com> 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?

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

In article <IoOdnRFALOheb5jVnZ2dnUVZ_vOlnZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

dorayme wrote:
In article <slrng0bfrs.qup.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-16, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <usenet-mail-E98E25.23043515042008 (AT) snap (DOT) homestarmy.net>,
Mark Shroyer <usenet-mail (AT) markshroyer (DOT) com> wrote:

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

dorayme wrote:

In article <IoOdnRFALOheb5jVnZ2dnUVZ_vOlnZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

dorayme wrote:
In article <slrng0bfrs.qup.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-16, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <usenet-mail-E98E25.23043515042008 (AT) snap (DOT) homestarmy.net>,
Mark Shroyer <usenet-mail (AT) markshroyer (DOT) com> wrote:

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

In article <7MSdnVS3YauePJvVnZ2dnUVZ_iydnZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

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

dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote in news:doraymeRidThis-
7BC3DA.11414717042008 (AT) web (DOT) aioe.org:

In article <7MSdnVS3YauePJvVnZ2dnUVZ_iydnZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

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

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

Gus Richter <gusrichter (AT) netscape (DOT) net> wrote in
news:z_2dnSzffqpKc5vVnZ2dnUVZ_sKqnZ2d (AT) golden (DOT) 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