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?

Answer 2

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

Answer 3

It's an old thread, I know. But last time I had a complete black hole about making a DIV with a NOT set width and with paddings, so it will not blow up my 3-columns row and with CSS2. So I put one DIV with float left, on with right and between them a DIV with no float and no fixed width, but I wanted to have padding in it. How about that...

I gived up. :D But I put an inner DIV in the center one and give it width=90%. So far so good, a very simple and not great solution, but sometimes it helps to achieve the look you need. ;]

b.r.

Answer 4

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