Effect of border/padding and nested margins on outer block layout
in [CSS]
|
From: Mark Shroyer on 15 Apr 2008 23:04 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/
From: Gus Richter on 16 Apr 2008 00:03 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
From: dorayme on 16 Apr 2008 04:25 In article <usenet-mail-E98E25.23043515042008(a)snap.homestarmy.net>, Mark Shroyer <usenet-mail(a)markshroyer.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
From: Ben C on 16 Apr 2008 04:57 On 2008-04-16, dorayme <doraymeRidThis(a)optusnet.com.au> wrote: > In article <usenet-mail-E98E25.23043515042008(a)snap.homestarmy.net>, > Mark Shroyer <usenet-mail(a)markshroyer.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.
From: dorayme on 16 Apr 2008 05:36
In article <slrng0bfrs.qup.spamspam(a)bowser.marioworld>, Ben C <spamspam(a)spam.eggs> wrote: > On 2008-04-16, dorayme <doraymeRidThis(a)optusnet.com.au> wrote: > > In article <usenet-mail-E98E25.23043515042008(a)snap.homestarmy.net>, > > Mark Shroyer <usenet-mail(a)markshroyer.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 |