Box Model

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear

• Padding - Clears an area around the content. The padding is transparent

• Border - A border that goes around the padding and content

• Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example

This <div> element will have a total width of 350px and a total height of 80px:

div { width: 320px; height: 50px; padding: 10px; border: 5px solid gray; margin: 0; }

Here is the calculation:

320px (width of content area) + 20px (left padding + right padding) + 10px (left border + right border) = 350px (total width) 50px (height of content area) + 20px (top padding + bottom padding) + 10px (top border + bottom border) = 80px (total height)