Question

I want to apply some padding in a div, but when the padding property is applied, the div size increases because the padding size is added to the div.

<div id="someDiv">
    someContent
</div>

#someDiv{
    padding: 1em;
}

There is some way to apply the padding without increasing the div size? I have one solution that includes adding another with the content div inside the #someDiv and applying margin to it, but I don’t know if this is the best solution.

Something like this:

<div id="someDiv">
    <div idi="anotherDiv">
        someContent
    </div>
</div>

#anotherDiv{
    margin: 1em;
}

Answer 1

Adding an inner div is, more or less, a good solution. There’s the box-sizing property, but it lacks support.

Here’s an article on the subject:

http://www.quirksmode.org/css/box.html

And here’s a polyfill (patch) for older IE versions — although I’m not sure how it affects performance; I’d recommend using it carefully.

https://github.com/Schepp/box-sizing-polyfill