CSS Box model

How to use the CSS Box model

Every CSS element is essentially a box. Each element is a universal box.

The box model describes the size of the element based on some CSS properties.

From inside to outside, we have:

  • Content area
  • filling
  • boundary
  • profit

The best way to visualize the box model is to open the browser DevTools and check how it is displayed:

Here you can see how Firefox tells mespanI emphasized the elements. I right-clicked on it, pressed Inspect Element, and went to the DevTools "Layout" panel.

As you can see, the light blue space is the content area. Surrounding it is the padding, then the border, and finally the margin.

By default, if you set a width (or height) on an element, that setting will be applied toContent area. All padding, border and margin calculations are performed outside of the value, so this must be kept in mind when making calculations.

You can use Box Sizing to change this behavior.

Download mine for freeCSS Manual

More CSS tutorials: