Each box has a content area and optional surrounding padding, border, and margin areas. The size of each area is specified by properties. The margin, border, and padding can be broken down into top, right, bottom, and left segments. The perimeter of each boxes is called an “edge”, so each box has four edges.
Padding, border and margin edges of #pink are built around the content box, from “inside out” (this is often referred to as the "box model"). Here we are styling the yellow box using CSS3 properties to mimic what is called the "broken box model".
IE 5 (and IE 6 in quirks mode) renders the box "from outside in". Which means border and padding are
inside the rectangle generated by the ‘width’ and ‘height’ properties. The yellow box here is built according to this algorithm.
IE 6 and 7 do not support
box-sizing, so in these browsers the two boxes look the same.
Switch the float direction of the yellow box, from ‘right’ to ‘left’. Note that in IE 6 and 7 the second box has a layout so the display is very different.