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.

The Box Model

Prerequisite to understanding inline layout.

Why is The Box Model Important?

Every element generates a box, which we call the element box. As the word "box" implies, these are rectangular in shape. Each box is made up of a number of parts. In the normal document flow, the element boxes of block-level elements cannot overlap each other (floats and positioning are the exceptions). In other words, the way a page is laid out is dependent on the size of each and every box. Going down the page, in broad terms, each box begins just below where the previous one ends. The positioning properties and the box model properties will often seem to interact, but in many ways they are quite independent of each other. The outermost point of the CSS box is the outer edge of the margin. The positioning properties determine where this outermost edge will be.

Real Width and Height

It turns out that width and height don't refer to the entire element box. Thanks to bad implementations, many designers are used to thinking of margins, borders, and padding as measures inside the width but they're really outside it! The value for width sets the width of the content-area, not the element box. The same reasoning holds true for height as well as width. It may seem counterintuitive, but there are arguments to be made either way.

Assume these styles:

div {width: 300px; padding : 30px; margin : 20px; border: 5px double black;}

The total width of the element box, from left margin edge to right margin edge, is 410px.

Percentages in the Box Model

For margins and padding, a percentage refers to the width of the parent element's content-area. Given:

div {width: 500px;}
p {width: 100px; margin: 10%}

All four margins (top, right, bottom, left) of any paragraph within a div will be 50px each...not 10px. Yes, top and bottom margins are calculated with respect to the width, not the height, of the parent element's content-area. Percentage padding is handled exactly the same way. Borders cannot be set to percentages, only length units (or one of three keywords).

What is padding?

Padding is an addition to the content-area, found between the content and the border. Padding can never be negative. The background of the element extends into the padding.

What are margins?

Margins are the extra "blank" space around the element, outside the border. Margins can be negative, which has the effect of pulling the element out of its normal position. The background of the element doesn't extend into the margins. Horizontally adjacent margins do not overlap. Vertically adjacent margins are collapsed.

Setting an element's margins to be negative can lead to weird effects. A negative top margin can "pull" the element upward, potentially overlapping other content. A negative bottom margin will "pull up" content which follow the element with the negative bottom margin. Negative left or right margins will pull the element to the right or left, potentially pulling it outside of its parent element. This is a visual trick; mathematically it's still within its parent. Browsers are not required to reflow the document just because an element got pulled out of position!

Padding versus Margins

Margins

Padding

Any design which employs element backgrounds will almost certainly make use of padding. Almost every design uses margins to some extent, even if in simple ways. The best designs tend to balance the two nicely.

Borders

Between the padding and the margins is the border. It's wrapped around the padding (if any). Border widths can never be negative or percentages. Allowed border widths include a length, thin, medium, thick. You can make borders very, very thick. The background of the element extends "underneath" the borders. Therefore, the background should be visible through any gaps in the border. If a border isn't given a style, or has its style set to none, its width is reset to zero. Border styles include none, solid, dotted, dashed, double, groove, ridge, inset, outset. The border's color is taken from the text color of the element, or set via border-color or one of the border properties.