Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

box-sizing

Name: box-sizing

Value: content-box | border-box


box-sizing: content-box;

In W3C box model, the width and height of an ele­ment give the width and height of the con­tent of the ele­ment.
It excludes the padding and bor­der as shown below.

  • con­tainer has width = 250 (200 + 10 x 2 + 15 x 2) px and height = 150 (100 + 10 x 2 + 15 x 2) px;
  • con­tent has width = 200 px and height = 100 px;

See the Pen box-sizing-1 by Kavit Shah (@kavitshah8) on Code­Pen.


box-sizing: border-box;

In tra­di­tional box model, the width and height of an ele­ment spec­i­fies the width that is inclu­sive of the bor­der of the ele­ment.
It includes the con­tent, padding and bor­der as shown below.

  • con­tainer has width = 250 (200 + 10 x 2 + 15 x 2) px and height = 150 (100 + 10 x 2 + 15 x 2) px;
  • con­tent has width = 150 px and height = 50 px;

Notice, that when you use border-box in the exam­ple below, it’s visu­ally smaller than the exam­ple above.

See the Pen box-sizing-2 by Kavit Shah (@kavitshah8) on Code­Pen.

All browsers except IE in quirks mode uses the W3C box model by default.

  • Chris Lajoie

    Thanks, this was help­ful. I started doing web dev more recently so I totally under­stand the W3C box model, but (as sim­ple as it actu­ally is after read­ing this) I didn’t really under­stand how border-box worked.

    I got the gist of what you were say­ing but you might want to fix that sec­ond for­mula.. looks like you copy/pasted and for­got to mod­ify it.

    • tuto­ri­al­hori­zon

      I am glad it helped you. The for­mu­las are cor­rect for con­tainer dimen­sions. I added the for­mu­las for cal­cu­lat­ing the con­tent dimen­sions , which were miss­ing initially.