Geek asks and answers

How to apply add-ons in HTML without increasing the size of the div?

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

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

#someDiv{
    padding: 1em;
}

Is there any way to apply padding without increasing the size of the div? I have one solution that involves adding another with the contents of a div inside #someDiv and applying a field to it, but I don't know if this is the best solution.

Something like that:

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

#anotherDiv{
    margin: 1em;
}
+3
source share
3 answers

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

Here is an article on this topic:

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

polyfill (patch) IE - , ; .

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

0
div { box-sizing: border-box; }

IE!

+6

If you have one <div>with automatic width, that is, it will automatically grow to the width of its parent element, adding indentation will not increase the width. This will increase the height, which, of course, is inevitable. The width will only increase if you set a fixed width for the element, then the total width will be width + padding. In this case, subtract the added padding from the given width.

+1
source

More articles:


All Articles