Why do the CSS width and height properties not adjust for padding?

Question

So first a bit of meat to set the scene:

HTML

    
test
         


        

Answer 1

You might want to review the following at w3c: http://www.w3.org/TR/CSS21/box.html

The box model is such that the height and width pertain to the content area of the element. Padding is outside of that area which is why you see the inner box overflowing the outer one.

After padding comes the border, if any. Then Margin applies outside of the border. This means the elements actual width is defined as: Width + Padding + Border + Margin.

In effect, the css you have defines the inner box to have a 300px by 150px content area plus an additional 5px of padding beyond that which yields a box that is 310px by 160px.

Personally, I agree that the Width should include the padding. However, that isn't what the spec says.

As a side note, quirks mode does include the padding (and border) in the actual width. Unfortunately, quirks mode screws up so many other things that it's usually better to just deal with the w3c spec'd model than try and create all the css necessary to fix the other "quirky" things.

Another site (who agrees with you and I) is here: http://www.quirksmode.org/css/box.html

They mention that CSS3 includes the box-sizing declaration (as you've found) which is supposed to give you more control over which box model to use. It looks like just about everyone (IE8, chrome, Firefox) supports that which is good.