CSS Box size

How to use box size in CSS

The default behavior of the browser when calculating the width of an element is to apply the calculated width and height toContent area, Regardless of any padding, borders and margins.

Practice has proved that this method is very complicated.

You can setbox-sizingproperty.

Thisbox-sizingProperty is a great help. It has 2 values:

  • border-box
  • content-box

content-boxIs the default setting, the default setting we used beforebox-sizingBecome a thing.

border-boxIt is the new and great things we are looking for. If you set it on the element:

.my-div {
  box-sizing: border-box;

The calculation of width and height includes padding and borders. Only the margins are kept, which is reasonable, because in our opinion, we usually treat it as separate content as well: the margins are not inside the box.

This attribute has not changed much, but it has a great impact. CSS tricks even statedInternational Packaging Size Awareness Day, Just to say, it is recommended to use the following method to apply it to each element on the page:

*, *:before, *:after {
  box-sizing: border-box;

Download mine for freeCSS Manual

More CSS tutorials: