如何在不增加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; 
} 

Answer 1

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

下面是关于这个问题的文章：

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

而这里的老年人IE版本填充工具（补丁） - 虽然我不知道它是如何影响性能;我建议小心使用它。

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

Answer 2

div { box-sizing: border-box; } 

虽然这是不支持在IE的某些版本！

Answer 3

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