Be the first user to complete this post Login To Mark Completed

0

Add to List Add To List..(Max 5) Close Save

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.

---

---

Also Read:

1. Why use javascript strict mode
2. Using css3 calc in an attribute value to compute its value at runtime
3. Getting started with localStorage vs sessionStorage in html5
4. Applying floats to inline elements
5. nodejs: generate uuid / guid

---