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 element give the width and height of the content of the element.
It excludes the padding and border as shown below.

  • container has width = 250 (200 + 10 x 2 + 15 x 2) px and height = 150 (100 + 10 x 2 + 15 x 2) px;
  • content has width = 200 px and height = 100 px;

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”gPgWRx” default_tab=”result” user=”kavitshah8″]See the Pen box-sizing-1 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]


box-sizing: border-box;

In traditional box model, the width and height of an element specifies the width that is inclusive of the border of the element.
It includes the content, padding and border as shown below.

  • container has width = 250 (200 + 10 x 2 + 15 x 2) px and height = 150 (100 + 10 x 2 + 15 x 2) px;
  • content has width = 150 px and height = 50 px;

Notice, that when you use border-box in the example below, it’s visually smaller than the example above.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”obBWeL” default_tab=”result” user=”kavitshah8″]See the Pen box-sizing-2 by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

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

  • Chris Lajoie

    Thanks, this was helpful. I started doing web dev more recently so I totally understand the W3C box model, but (as simple as it actually is after reading this) I didn’t really understand how border-box worked.

    I got the gist of what you were saying but you might want to fix that second formula.. looks like you copy/pasted and forgot to modify it.

    • tutorialhorizon

      I am glad it helped you. The formulas are correct for container dimensions. I added the formulas for calculating the content dimensions , which were missing initially.