CODEWITHSUNDEEP
htmlcss
Renato Dinhani
Renato Dinhani

Reputation: 36686

How apply padding in HTML without increasing the div size?

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;
}

Upvotes: 4

Views: 13567

Answers (3)

deceze
deceze

Reputation: 522081

If you have a <div> with an auto-width, i.e. which will automatically grow to the width of its parent element, adding padding will not increase the width. It will increase the height, which is of course inevitable. The width will only increase if you have set a fixed width for the element, the total width will then be width + padding. In that case, subtract the added padding from the set width.

Upvotes: 1

avramov
avramov

Reputation: 2114

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

Upvotes: 1

Cameron
Cameron

Reputation: 28793

div { box-sizing: border-box; }

Although this is isn't supported in certain versions of IE!

Upvotes: 7

Related Questions