html - 如何在不增加 div 大小的情况下在 HTML 中应用填充？

Question

我想在 div 中应用一些填充，但是当应用填充属性时，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;
}

score 7 · Accepted Answer

7

div { box-sizing: border-box; }

尽管某些版本的 IE 不支持此功能！

于 2012-04-15T13:34:06.510 回答

score 1 · Accepted Answer

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

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

这是旧 IE 版本的 polyfill（补丁）——尽管我不确定它如何影响性能；我建议小心使用它。

score 1 · Accepted Answer

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

3 回答 3