HTML elements can be either inline or block. Block elements are considered a 'box', consisting of (from inside to outside):
- contents
- padding
- border
- margin
Setting the width of a block element such as a <div> in combination with padding or border can result in a different width overall, depending on the
'box model' you are in:
- The traditional box model. The width of a box is maintained, no matter the padding or border-width that you set. Give an element a width of 200 pixels, then it will stay 200 pixels.
- The W3C box model. The width that you specify (let's say 200 pixels) gets the border and padding added up to.
The W3C box model is enabled when your page runs in standards mode. Read this page about standard mode and how to enable it.
The only advantage I can see to the W3C box model is that all modern browsers render the page in a similar way. This saves you a lot of time because you don't have to redo your css for specific browsers.
What I don't understand is the logic behind the W3C model. You just want to specify the width of a box, and it should stay that. Just like a carton box. Putting padding in a carton box doesn't make the box larger, right?
Even moreso, the issues that you'll encounter using the W3C model is 100% width in combination with a border or padding. It'll always get you scrollbars, so you have to use inner div elements to work around it. All in all it just doesn't get pretty.
I wrote a multi-user chat environment based on classic Sierra On-Line adventure games a long time ago. It's still working, although you should consider it a retro museum just like the original games by now.
HTML elements can be either inline or block. Block elements are considered a 'box', consisting of (from inside to outside):