What Is The Box Model?

The CSS box model describes the rectangular boxes that are generated for elements in the document tree.
Published on Sep 28 2016 by Angus Dowling

Definition

The CSS box model describes the rectangular boxes that are generated for elements in the document tree. — W3 Spec

Each HTML element draws a box. These boxes are the fundamental building materials of any website. How these boxes behave and are defined, is by what's known as the Box Model. There are four areas to any box. These are:

  • Content
  • Padding
  • Border
  • Margin

This relationship between these areas can be illustrated by the following diagram:

Content

The content region of the box is where any HTML elements inside this element will go. When you set a width and height via CSS, this is the part of the box you are manipulating.

Padding

A good way to think of padding is if you considered it "extra stuff" inside the box. (as opposed to margin, which is outside the box). Padding is able to contain some content. CSS backgrounds will go to the edges of the padding, as well as absolutely positioned child elements. Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.

Margin

Margin is the boundary between boxes. In some cases, sibling elements will collapse their margins. This means that instead of the margin between the two elements being the addition of both elements margins, the biggest of the two margins is chosen to be the full distance.

Border

The border properties specify the width, color, and style of the border area of a box. These properties apply to all elements. — W3 Spec

There's really not much to it!

Conclusion

To read in more depth, I always recommend going to the source of information for these things. Although dry reading, W3 offers the best information. (Not W3Schools, but the real W3 which can be found here.)