Content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut |
.inside { margin: 50px;
padding: 20px;
width: 100px;
border: 5px solid #0000FF;}
The width, the blue content area, is 100px.
The padding,
borders and margins are added on to the outside of the width,
to arrive at a total of 150px for the visible bordered box dimension,
or 250px
from outer (dotted) margin edge to outer margin edge.
50 + 5 + 20 + 100 + 20 + 5 + 50 = 250 pixels actually filled on screen
In IE5, "width" was the area including the blue border and padding.
20 + 5 + 100 + 5 + 20 = 200 pixels actually filled on screen