Posted By

bmayzure on 01/25/13

Tagged

simple
CSS3

Versions (?)

Last Edited at 01/25/13 11:10am

Statistics

Viewed 915 times

Favorited by 1 user(s)

Related snippets

CSS3 Box Sizing Made Easy

/ Published in: CSS

When box sizing is set, the padding, border and margin no longer add onto the total width or height of the element. Instead, they eat into the set width or height. So, if you have a box whose width is set to 300px, and padding set to 10px, then the total width of the box is still 300px. Instead, there are 20 less pixels inside the box for content such as text or images. This may be a confusing concept but one that will definitely come in handy, especially to those who do not like to do math because we all know that in the real world measurements are made up of wacky numbers and not increments of 10.

**Source:** [http://designmodo.com/css-layout-properties/](http://designmodo.com/css-layout-properties/) and [http://css-tricks.com/box-sizing/](http://css-tricks.com/box-sizing/)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* Box-Sizing fix */
/* When box sizing is set, the padding, border and margin no longer add onto the total width or height of the element. Instead, they eat into the set width or height. So, if you have a box whose width is set to 300px, and padding set to 10px, then the total width of the box is still 300px. Instead, there are 20 less pixels inside the box for content such as text or images. This may be a confusing concept but one that will definitely come in handy, especially to those who do not like to do math because we all know that in the real world measurements are made up of wacky numbers and not increments of 10. */
/* Source: Source: http://designmodo.com/css-layout-properties/ and http://css-tricks.com/box-sizing/ */
 
#box {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}