Page 1 of 1

[CSS] Is this the correct behavour

Posted: Tue Jul 25, 2006 8:44 am
by JayBird
Say i have a <div> that has a height of 100px

I then set padding-top of this div to 30px (or margin-top).

Does that mean my div now takes up 130px in height?

Posted: Tue Jul 25, 2006 9:33 am
by Benjamin
I'm not going to say I know the answer to this, but I'm pretty sure the answer depends on the browser. Google for browser box-model.

Edit: http://www.w3.org/TR/REC-CSS2/box.html

Posted: Tue Jul 25, 2006 9:38 am
by JayBird
According to the W3C, an assigned 'width' (and 'height') of a box refers to the 'content area' of a box only. The padding, borders, and margins are then added to this value to arrive at the total box width. If the 'width' property is omitted, the total box width is the same as the 'content area' of the surrounding container element.

All well and good. Unfortunately, all CSS enabled versions of IE before IE6/strict use a different box model. In that model, the padding and borders are counted as part of any assigned 'width' or 'height'. In the absence of borders and padding, the two models agree. However, if a box has an assigned "width', and if borders and/or padding are added, the standard box model causes the overall box width (between the outer border edges) to increase, while in IE's model the 'content area' gets squeezed by the same amount. This is a major problem for proper page layout.

Consider the following CSS:

Code: Select all

{width:100px; padding:10px; border:10px;}
When viewed in a 'standards' browser the dimension from border edge to border edge will be '140px'. (100+10+10+10+10=140) Because IE5.x puts all these values inside the 'width', the border edge to border edge dimension will be '100px'.

Note: For technical reasons it sometimes would be desirable to employ the old IE box model. It has been bruited about that CSS-3 will feature a way to choose between the two models, but the current standard model will no doubt remain the default.