What is the Box Model

suggest change

The Edges

The browser creates a rectangle for each element in the HTML document. The Box Model describes how the padding, border, and margin are added to the content to create this rectangle.

CSS Box Model

Diagram from CSS2.2 Working Draft

The perimeter of each of the four areas is called an edge. Each edge defines a box.


div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;

This CSS styles all div elements to have a top, right, bottom and left border of 5px in width; a top, right, bottom and left margin of 50px; and a top, right, bottom, and left padding of 20px. Ignoring content, our generated box will look like this:

Box Model for Above Example

Screenshot of Google Chrome’s Element Styles panel

Now lets give our element a sibling with the same style. The browser looks at the Box Model of both elements to work out where in relation to the previous element’s content the new element should be positioned:

Two identical elements next to each other

The content of each of element is separated by a 150px gap, but the two elements’ boxes touch each other.

If we then modify our first element to have no right margin, the right margin edge would be in the same position as the right border edge, and our two elements would now look like this:

First element no right margin

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents