ruk·si

🎨 CSS
Box-sizing

Updated at 2015-07-30 10:40

box-sizing allows taking account padding and border when calculating element height and width.

You should always use box-sizing: border-box. All major browsers, including IE8 support it so it can be used without problems.

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

If you have third party styles, you can specify them to use the old content box.

.component {
  /* designed to work in default box-sizing */
  /* in your page, you could reset it to normal */
  box-sizing: content-box;
}

Sources