Property box-sizing

I’ve been testing the two values of the box-sizing property (border-box and content-box) and can’t really see any big difference. What’s going on between those two?

border-box makes padding and border part of the dimensions of the box, while context-box (the default) will expand the box:

<div>abc</div>

css:

div {
  width: 100px;
  height: 100px;
  background: aqua;
  padding: 20px;
  box-sizing: content-box;
}

the box is now 140x140px, if we change the box-sizing to border-box (go ahead and try), the box is 100x100px, so you should see the box shrink :slight_smile:

this example is with padding, but same applies for any borders