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; but also wants to add padding to the contents inside the column. Any way to specify that?

Answer 1

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+ */
}

Answer 2

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?

Answer 3

Everytime you add padding to block element, the width of this element changes. This problem has many solutions. I usually set margin to first child element and set width: 100% for this element.

For example, we have:

<div id="main">
    <div id="child">
        This is content with margin
    </div>
</div>

CSS style for these elements:

#main {
    border: solid 1px red;
    float: left;
    width: 5em;
}

#child {
    border: solid 1px blue;
    float: left;
    width: 100%;
    margin: 0.5em;
}

This is a solution for any browser