Box-Sizing

+3 Nikola Novakovic · August 6, 2014
Hey there!

Remember those days when we needed to bust our heads over the wall with plane old box-model in css and actually calculate everything ? 

I had to put on paper my padding, margin and border AND width and that would be the actual width of an element  ( be it block or inline level one ).

The solution is fairly old but just wanted to share it with you:

element
element{ 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}



Here is the link for more info : http://css-tricks.com/box-sizing/

Most of the experienced guys would know this , but it is a nifty thing to know if you are a beginner :) 

Post a Reply

Replies

Oldest  Newest  Rating
0 Colin James · August 8, 2014
I use this a lot. Saves a lot of time in terms of inner padding for whitespace in content holders.
-7 Nikola Novakovic · August 8, 2014
yeah its pretty awesome :) 
  • 1

HTML / CSS / Web Design

107,255 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators