Be the first user to complete this post
|
Add to List |
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;
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;
All browsers except IE in quirks mode uses the W3C box model by default.
Also Read:
- window.onload vs document.onload
- pseudo elements vs pseudo classes
- Making max width work in internet explorer
- es6 iterators and iterables - creating custom iterators
- Getting the parameters and arguments of a javascript function