This post was most recently updated on December 28th, 2016
What is the box model?
A HTML element is rendered as a rectangle box. The box has attributes viz. width, padding, height, margin and border.
The HTML element is rendered differently in different browsers.
For example:
|
1 2 3 4 5 6 |
div { margin: 10em; padding: 4em; border: 1em solid green; width: 50em } |
Guess the computed width of the div.
- 60em
- 80em
Both are correct answers. How?
- IE: Trident (layout engine for IE) renders the div as a box with- 50em width, 2em margin (left + right),8em padding (left + right) excluding 20em margin (left + right)
- Firefox: Gecko (layout engine for Firefox) renders the div as a box with- 50em width, 2em margin (left + right),8em padding (left + right), 20em margin (left + right)
To avoid this and make the element rendering uniform throughout browsers, use box-sizing property of CSS.
CSS Syntax: box-sizing: content-box|border-box|initial|inherit;
| content-box | Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included |
| border-box | The width and height properties (and min/max properties) includes content, padding and border, but not the margin |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Support
 |
10.0 , 4.0 -webkit-box-sizing |
 |
8.0 |
 |
29.0, 2.0 -moz-box-sizing |
 |
5.1, 3.2 -webkit-box-sizing |
