Question

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

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

#someDiv{
    padding: 1em;
}

有一些方法可以在不增加div大小的情况下应用填充？我有一个解决方案，包括在#someDiv中添加另一个内容div并为其应用保证金，但我不知道这是否是最佳解决方案。

这样的事情：

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

#anotherDiv{
    margin: 1em;
}

Answer 1

div { box-sizing: border-box; }

虽然某些版本的IE不支持此功能！

Answer 2

如果您的<div>具有自动宽度，即自动增长到其父元素的宽度，则添加填充不会增加宽度。它会增加高度，这当然是不可避免的。如果为元素设置了固定宽度，宽度将只会增加，总宽度将为width + padding。在这种情况下，从设置的宽度中减去添加的填充。

Answer 3

添加内部div或多或少是一个很好的解决方案。有box-sizing属性，但它缺乏支持。

这是一篇关于这个主题的文章：

这是旧版IE的polyfill（补丁） - 虽然我不确定它如何影响性能;我建议你仔细使用它。