Wickham's XHTML & CSS tutorial
Padding and borders without a Doctype
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 updates are mainly related to HTML 5 and CSS3 issues and it displays to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems 
warning: works in some situations or some browsers or needs care to display as you wish 
OK in Firefox, Safari, Opera, Google Chrome and IE6 to IE9
1 This shows how IE is different from Firefox when a Doctype is not used (quirks mode). The padding and borders are calculated inside the box in IE but outside with Firefox. The image is 200px wide and the divs are width: 200px so that they display the same width with padding and/or borders contained inside the div in IE.
Gray padding 20px to all sides above.
Dark gray border 20px to all sides below.
Note that the overall width of the div boxes is the same as the image in IE as the padding or borders squeeze the text area narrower; the width has the padding or borders additional to the basic div width in Firefox. The height is also affected the same way, but additional text would automatically increase the div height in both IE and Firefox.
IE will display padding and borders outside the box sizes if a Doctype is used and this is recommended.
You should also note how some stylesheet styles are working but some are not; the page, divs and image are not centralising and the general font is not small as specified in the stylesheet without a Doctype in IE but are correct in Firefox - so use a Doctype.
The page will not validate if there is no Doctype.
© Wickham 2006