 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / General / Web Design / August 2008CSS padding - 1px top & bottom is a lot more than 0px
I'm (still) a bit mystified by the CSS box model and have been playing. I put a few lines of text in a paragraph in a div. (The para has no style set.) If the div padding and border are both 0, the box (as shown by its background color) fits close around the text - as I expected. But if any border is set, padding appears at top and bottom, something like 7px I guess. This seems to be the minimum top and bottom padding, and any explicitly set appears in addition. Also if padding is set without a border, setting 1px top and bottom again gives this minimum amount of about 7px, and any further increase set in the style appears in addition. In other words, you can't get 1px padding top and bottom. You can either have none at all, or something like 7px. This isn't causing me any trouble but I can't find it documented anywhere and I'm trying to understand what is going on. Browsers are IE7 and Opera 9.52, and the document validates as HTML4 strict mode.  SignatureTony W My e-mail address has no hyphen - but please don't use it, reply to the group. >I put a few lines of text in a paragraph in a div. (The para has no style >set.) If the div padding and border are both 0, the box (as shown by its [quoted text clipped - 10 lines] >and I'm trying to understand what is going on. Browsers are IE7 and Opera >9.52, and the document validates as HTML4 strict mode. I suspect that what you are seeing is the effect of collapsing margins. See <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>. Suppose you have something like this: <h2>header</h2> <div> <p>Some text</p> </div> If the div has no border and zero margin and padding then the bottom margin of the h2 and the top margin of the p will combine to form a single margin whose size is the maximum of the two. If you put a border (or padding) on the div then the bottom margin of the h2 will be above the div border/padding and the top margin of the p will be below the div border/padding. What looks like padding on the div is really the transparent margin of the p. SignatureOwen Rees [one of] my preferred email address[es] and more stuff can be found at <http://www.users.waitrose.com/~owenrees/index.html> > I suspect that what you are seeing is the effect of collapsing margins. (snip) > What looks like padding on the div is really the transparent margin of > the p. What I have is, this in the header:- .box {background:red; color:white; border: double 10px black; padding: 40px; margin: 60px;} And this in the body:- <div class="box"> <p>Some text</p> <div style="background:white; color:black; margin: 120px; padding:1px 0px; border:solid 0px black;"> <p>This is a box with background set white, text set black, and margin set to 120px. Padding is set to 1px but appears more at top and bottom.</p> </div> </div> What I can't understand is the effect of changing either padding or border of the inner div between 0 and 1px. The extra white background that appears (more than 1px) must surely be padding, not margin, because it is the colour of the inner div background, and if I set a 1 px border the extra space appears inside. SignatureTony W My address has no hyphen - but please don't use it, reply to the group. >What I have is, this in the header:- >.box [quoted text clipped - 19 lines] >of the inner div background, and if I set a 1 px border the extra space >appears inside. Try adding this to the style: div.box div p {margin-top: 200px; } That puts a 200px top margin on the p inside the inner box. If the inner box has neither border nor padding this top margin on the p will collapse with the 120px margin on the inner div giving a 200px margin. Margins are always transparent so the background shows through - and here is where the fun begins. I don't know about other browsers, but Firefox shows the red background of the outer div for the whole 200px of the collapsed margin rather than having 120px of red then 80px of white as you might think you would get if the content of the inner div with its white background started after the 120px margin of the inner div. That split colour would go against the spirit of the explicit statement that the margins combine to a single margin, but I have not been able to find any explicit discussion of the issue of collapsing margins between parent and child elements and which backgrounds show through where. Putting the 1px padding on the inner div stops the margins from collapsing so you get the red background of the outer div showing through the 120px margin of the inner div. That is followed by 1px of padding of the inner div and 200px of the top margin of the p showing the white background of the inner div. Then follows the content of the p which will be affected by line-height and you will get a half-leading worth of white background above the glyphs. SignatureOwen Rees [one of] my preferred email address[es] and more stuff can be found at <http://www.users.waitrose.com/~owenrees/index.html> > ... > Putting the 1px padding on the inner div stops the margins from > collapsing ... That's what I've been looking for - where does it say that padding stops margins collapsing? Anyway I've been playing some more and come to the conclusion it is to do with the way that the <p> element is given margins by the browsers. I think collapsing just adds confusion - once there is a margin it will collapse, but should there be a margin at all? It doesn't seem as obvious as I thought. In the following code, setting ANY margin explicitly for <p> - even auto or inherit - behaves differently from not having an explicit setting. Surely the default should be auto or inherit? Also in IE7 the inner box overlaps the outer but only on the bottom! This doesn't happen in current versions of FF and Opera. If you want to try, in the following code try removing the margin style for <p> and also changing it to 0. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>CSS box play</title> <style type="text/css"> <!-- .box {background:red;color:white;border: double 5px black;padding: 5px;margin: 0px;} .innerbox {background:white; color:black; margin: 0px; padding:0px; border:solid 0px black;} p {margin:auto; border: 1px solid green;padding:1px;} --> </style></head> <body> <div class="box"> <div class="innerbox"> <p>This is innerbox.</p> </div> </div> </body></html> SignatureTony W My address has no hyphen - but please don't use it, reply to the group. >That's what I've been looking for - where does it say that padding stops >margins collapsing? In my previous response I gave this link: <http://www.w3.org/TR/CSS21/box.html#collapsing-margins> If you follow that link you see this... ============ 8.3.1 Collapsing margins In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. ============ SignatureOwen Rees [one of] my preferred email address[es] and more stuff can be found at <http://www.users.waitrose.com/~owenrees/index.html> > 8.3.1 Collapsing margins > > In this specification, the expression collapsing margins means that > adjoining margins (no non-empty content, padding or border areas or > clearance separate them) of two or more boxes (which may be next to one > another or nested) combine to form a single margin. Thanks for the link and I don't wish to seem ungrateful. But I find this hard to understand. If a and b are separated by c, then c comes between a and b. As the margins are outside the padding and border, as I see it, padding and border do not come between the margins of adjacent boxes, so do not separate them. Or do "between" and the verb "to separate" mean something different from what I think? SignatureTony W My e-mail address has no hyphen - but please don't use it, reply to the group. >Thanks for the link and I don't wish to seem ungrateful. But I find this >hard to understand. If a and b are separated by c, then c comes between a >and b. As the margins are outside the padding and border, as I see it, >padding and border do not come between the margins of adjacent boxes, so do >not separate them. Or do "between" and the verb "to separate" mean >something different from what I think? You have a p followed by a div containing a p, i.e. <p></p> <div> <p></p> </div> Considering only top and bottom you have: p top margin p top border p top padding p content p bottom padding p bottom border p bottom margin - m1 div top margin - m2 div top border - b3 div top padding - p4 p top margin - m5 p top border p top padding p content p bottom padding p bottom border p bottom margin div bottom padding div bottom border div bottom margin If border b3 and padding p4 are empty them margins m1, m2 and m5 collapse into a single margin of size max(m1,m2,m5). If either of b3 and p4 are non-empty then m1 and m2 will still collapse together to a margin of size max(m1,m2) but m5 will not collapse with them. The collapsing of m2 and m5 is explicitly covered [refs added]: "The top margin [m2] of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin [m5] if the element has no top border [b3], no top padding [p4], and the child has no clearance." SignatureOwen Rees [one of] my preferred email address[es] and more stuff can be found at <http://www.users.waitrose.com/~owenrees/index.html> |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2010 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.