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.

s

Solution 1:

div { box-sizing: border-box; }

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

Solution 2:

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

Solution 3:

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.

Share