divのサイズを増やさずにHTMLで埋め込みを適用するにはどうすればよいですか？

Question

divにいくつかのパディングを適用したいのですが、paddingプロパティを適用すると、divにパディングサイズが追加されるため、divサイズが増加します。

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

#someDiv{ 
    padding: 1em; 
} 

divのサイズを増やさずにパディングを適用する方法はありますか？ #someDivの中にあるcontent 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になります。その場合は、追加されたパディングを設定幅から差し引きます。