MGmirkin Posted March 6, 2010 Share Posted March 6, 2010 New to CSS and trying to figure out why things function the way they do...I'm testing out some stuff in one of the "Try It Now" boxes, but am getting confused.Here's the code: <html><head><style type="text/css">body { width:100%; margin:0px; padding:0px;}div.container { width:100%; margin:10px; padding:0px; border:1px solid gray; line-height:150%;}div.header, div.footer { margin:0px; padding:0px; color:white; background-color:gray; clear:left; /*border-style:solid;*/ /*border-color:black;*/ /*border-width:1px;*/}div.left { float:left; width:38%; margin:0; padding:5px;}div.content { float:left; width:57%; padding:5px; border-left:1px; border-left-style:solid; border-left-color:black;}h1.header { /*margin:0px;*/ /*padding:0px*/ text-align:center; background-color:gray;}h2 { text-align:center;}</style></head><body><div class="container"><div class="header"><h1 class="header">W3Schools.com</h1></div><div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div><div class="content"><h2>Free Web Building Tutorials</h2><p>At W3Schools you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p><p>W3Schools - The Largest Web Developers Site On The Net!</p></div><div class="footer">Copyright 1999-2005 by Refsnes Data.</div></div></body></html>The bit I'm concerned with at the moment is the style info currently in comments /* ... */That is to say, the behavior/interaction of the div.header and h1.header It seems to me to be inconsistent with respect to how the background color of the container div.header gets extended by the margin around the h1.header tag. Under some circumstances it does, and under some it doesn't.If I don't specify margin:0px; for the h1.header tag, it appears to put a top and bottom margin around the header. The margin is white, however, rather than the gray background color of the div.header tag in which the h1.header tag is nested. One would THINK, intuitively, that the margin would be for the H1 tag and that it would push the boundary of the containing div.header, which would then fill with gray background color of said container div tag. But it does not.If I specify margin:0px; for h1.header, then the above and below whitespace disappears.Decided to test whether the margin was being applied inside or outside the containing div by adding a border to see where the edges of the div were when margin on the h1.header were NOT set.Curiously, if I specify that div.header have styles border-style:solid; border-width:1px; border-color-black; the expectation above *IS* fulfilled when margin:0px; for h1.header is commented out. That is to say, the margin falls within the border and the background gray color DOES extend all the way out to the edges of the border.So, my question is WHY does this happen? Is it a CSS problem or a browser problem? I'm running Firefox 3.5 (Shiretoko) on Ubuntu 9.04.AKA, why is it that WITHOUT a border specified on div.header, the margin of h1.header extends as whitespace around the gray header, but WITH a border specified the margin of the h1 header extends as grayspace within the containing div.header having the border. This confuses me. Now, I know margins themselves are invisible (as opposed to padding which extends background color), but if there's a margin INSIDE another tag, shouldn't the containing tag be extended by it and apply its own formatting (background-color)?Shouldn't the behavior of the containing div be consistent regardless of whether a border is specified? That is to say, if a margin extends the border of the containing div, shouldn't the background color extend to the edge of the container and the "whitespace" be "grayspace"?Any thoughts?I assume I could fix the issue easily enough by moving the background-color declaration to the h1.header and manually controlling the margin and padding for whatever desired grayspace widths I want (or don't want). Link to comment Share on other sites More sharing options...
thescientist Posted March 6, 2010 Share Posted March 6, 2010 I kind of just skimmed through that but it appears your question concerns spacing around heading tags? heading tags are block level elements by default, so they will have their own default spacing around them, which give you that space. When you set the margins to 0, you take that away. Box model can be a bit confusing. Link to comment Share on other sites More sharing options...
MGmirkin Posted March 6, 2010 Author Share Posted March 6, 2010 I kind of just skimmed through that but it appears your question concerns spacing around heading tags? heading tags are block level elements by default, so they will have their own default spacing around them, which give you that space. When you set the margins to 0, you take that away. Box model can be a bit confusing.In skimming, you seem to have missed the principle question...There's a container div with a background color: gray. Inside the container div is an h1 tag.If I don't specify a concrete margin for the h1 tag, it uses its own default margin. You're correct there. My question was why is the container div's background color NOT extended to the border of the default margin of the h1 tag UNLESS I specify a border on the container div (at which point the background color IS extended to the additional width generated by the H1's margin)?If I specify a margin of 10px for the h1 tag, the background color of the container div is NOT extended, but if I conversely specify margin of 0 and padding of 10px, the background color of the container div IS extended... Confusing. Shouldn't both options extend the border of the container div and thus extend the fill of the container div's background color? Why does one extend the fill of the parent tag's background color and the other does not?It was apparent from adding a border to the container div that the h1 tag's margin DOES extend the border of the div (as the div's background color fills to the border when the borer is specified; the question is why ithe background color does NOT fill when border is NOT specified, despite the fact that the div itself appears to have its margins pushed out, as apparent from adding a border). I'm just confused by this.So far it seems:For h1 margin:10px; padding:0px; and no border on the container div, the cotainer div's background color DOES NOT extend to the edge of the h1's margin.For h1 margin:0px; padding:10px; and no border specified on the container div, the container div's background color DOES extend to the edge of the h1's padding.For h1 margin:10px; padding:0px; with a solid black border specified on the container div, the div's background DOES extend to the edge of the h1's margin.I'm just trying to figure out why the background color of the container div DOES NOT extend to the edge of the margin of the h1 tag when no border is specified for the container div. It's clear that the margin is in fact generated. It's just generated as whitespace rather than grayspace (AKA, the container div's background color DOES NOT extend, despite the fact the h1 is nested within it and appears to extend the border of the div, as shown when the border is applied).Any ideas why the margin by itself on the h1 does not trigger background color fill in the container div, versus the fill happening if one uses padding instead of margin or uses a border on the div?Not sure if it's a CSS functionality thing or a browser implementation thing... I'm guessing it's a CSS thing, though.Best,~MG Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.