box-sizing

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:

box-sizing
css box model css2 vs css3

CSS Syntax

box-sizing: content-box|border-box|initial|inherit;

Property Values

Value Description
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

 

Browser Support

Chrome (any): box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing

 

Thank you for reading… have a great day!

Source:

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
http://css-tricks.com/box-sizing/
http://www.clickcss.com/box-sizing.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s