Example of the Box Model

HTML elements display as boxes on web pages. This div element is configured to have a blue background, the browser default padding (which is no padding), and a black 5 pixel border.

The "box model" in CSS works like this:
width + padding + border = actual visible/rendered width of box and height + padding + border = actual visible/rendered height of box

Box 1: Width = 100% (100% + 4)

Box 2: Width = 460px (460 + 4)

Box 3: Width = 460px + padding of 40px + 4px border (actual width is 504px)

Let's look at floated elements

Floated Box 1

Floated Box 2

Floated Box 3