Add padding without changing overall width

Question

How can I add padding to an element without adding on top of the predefined width?

It\'s good to define the width of a column to make a clean grid for the layout; bu

Answer 1

Use box-sizing, it makes padding inclusive: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

Example:

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

It's worth noting that this won't work on IE7.

For IE8, please see the top answer to this Q: box-sizing: border-box => for IE8?