Always put below code in your stylesheet

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

it ensures that every element on page has the value including in the parentheses{}.* indicates for all element.

Box-sizing has two values, first one is border-box and the second is content-box. By Default, any element treated as content-box. for example let’s assume you have a div which has dimension 400px*400px.if you give 20px padding to div, it’s size will be 440px*  if you give the property box-sizing:border-box; to the div it’s new dimension will remain same as initial(400px*400px).this is because of border-box.

border-box includes the padding internally.while content-box takes padding as externally.
this is the propery which is very usefull for developing a responsive website.after including this property you don’t need to calculate percentage for its width and padding.

old formatting example-
myDiv{width:98%;padding:0 1%;}

new formatting example using border-box-
myDiv{width:100%;padding:0 1%;}


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s