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".

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the ‘width‘ or ‘height‘ property set, whether the box contains text or other boxes, etc.

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.

Try These

Watch This


Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).