如何在HTML中应用填充而不增加div大小？ [英] How apply padding in HTML without increasing the div size?

问题描述

我想在div中应用一些填充，但是当应用padding属性时，div大小会增加，因为填充大小会添加到div。

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

有一些方法来应用填充而不增加div大小？我有一个解决方案，包括添加另一个与#someDiv内的内容div，并应用边距，但我不知道这是否是最好的解决方案。

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.

像这样：

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

#anotherDiv{
    margin: 1em;
}

推荐答案

或多或少，一个很好的解决方案。有盒尺寸属性，但它缺乏支持。

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

这里有一个polyfill（补丁）对于旧的IE版本 - 虽然我不知道它如何影响性能;我建议您仔细使用。

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

这篇关于如何在HTML中应用填充而不增加div大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！