Box-Sizing

Tips

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*440px.now  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%;}

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