Are you worried about css box model? puzzle to calculate height, width with border, padding? Let’s think it new way with less complicity. Yes, the element of CSS3 “box-sizing” has broken one of the most complex design patterns of CSS2 and earlier versions. Let’s see how it is actually, how it works, how many browsers support it, etc.
Definition and Usage:
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box or just the content-box which is the default value of the width and height properties.
How it different from Box Model
The “box model” in CSS works like this:
width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box
It’s a little weird, but you get used to it. In IE 6 and earlier, when in “quirks mode,” the box model was treated differently.
width = actual visible/rendered width of box
height = actual visible/rendered height of box
The border and padding values moved inward, cutting into the width/height of the box rather than expanding it. Here is a dramatic example of the difference:
|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. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
Thank you for reading… have a great day!