All HTML elements can be thought of as boxes, and in CSS, the term “box model” is used for design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the Box Model:


Description of different parts:

  • Margin – Clears the area outside the border. The Margin is transparent.
  • Border – The Border around the inside margin and around the content.
  • Padding – Clears the area around the content. The Padding is transparent.
  • Content – The contents of the box, displaying text and images.

To properly set the width and height of elements in all browsers, you need to know how the box model works.

Width and height of the element

Important:When you specify the width and height properties of a CSS element, you simply set the width and height of the content area. For full-size elements, you also have to add margins, borders, and margins.

The following example has elements with a total width of 500px:

The instance

div { width: 500px; border: 25px solid green; padding: 25px; margin: 25px; }

Try it »

Let’s do the math: 500px \

  • 50px (left + right)\
  • 50px (left + right border)\
  • 50px (left + right margin)\

= 650px

Summary: ### areas in the box

There are five main properties in a box: width, height, padding, border, and margin. As follows:

  • Width and height: the width and height of the content (not the box width and height).
  • Padding: Inside margin.
  • Border: indicates the border.
  • Margin: the outer margin.