CSS box-sizing Property

Datetime:2016-08-23 03:00:39          Topic: CSS           Share

box-sizing defines how the width and height gets applied on an element. It can be useful to play with box-sizing if, for example, an element needs to take a precise amount of space on a page, with its padding and border included. It can take two possible values:

  • content-box : The width & height of the element only include the content. In other words, the border, padding and margin aren’t part of the width or height. This is the default value.
  • border-box : The padding and border are included in the width and height.

There was also a padding-box value, but it’s now deprecated and should no longer be used.

Here’s an example to illustrate the two possible values:

box-sizing: content-box

Notice that with content-box the element ends up taller and wider than the specified dimensions because the border and padding fall outside of those dimensions.

.alligator-box {
  box-sizing: content-box;
  width: 125px;
  height: 125px;
  border-width: 10px;
  padding: 40px;
}

box-sizing: border-box

.alligator-box {
  box-sizing: border-box;
  width: 125px;
  height: 125px;
  border-width: 10px;
  padding: 40px;
}




About List