This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Doctypes and Box Differences

Reference: CSS Enhancements in Internet Explorer 6 by Lance Silver.

Formula:

Visible portion of the box
(IE legacy)
 = width (no border or padding is counted)

Total width of the element box

 = width + margins (no border or padding is counted)
Visible portion of the box
(standards)
 = width + padding + borders
Total width of the element box
(standards)
 = width + padding + borders + margins

Example:

Assume the following styles:

div#aside {width: 350px; padding: 20px; border: 2px solid black; margin: 10px;}
Visible portion of the box
(IE legacy)
see figure 2a

= width (no border or padding is counted)

so:
350px
= 350px width

Total width of the element box
(IE legacy)
see figure 2b.1
 and figure 2b.2

= width + margins (no border or padding is counted)

so:
370px
= 350px width + 10px left margin + 10px right margin
Visible portion of the box
(standards)
see figure 2c

= width + padding + borders

so:
394px
= 350px width + 20px left padding + 20px right padding + 2px left border + 2px right border
Total width of the element box
(standards)
see figure 2d

= width + padding + borders + margins

so:
414px
= 350px width + 20px left padding + 20px right padding + 2px left border + 2px right border + 10px left margin + 10px right margin