如何在不增加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。在這種情況下，從設置的寬度中減去添加的填充。