4

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

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

#someDiv{
    padding: 1em;
}

divサイズを大きくせずにパディングを適用する方法はありますか？#someDiv内のコンテンツdivで別のソリューションを追加し、それにマージンを適用することを含む1つのソリューションがありますが、これが最良のソリューションであるかどうかはわかりません。

このようなもの：

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

#anotherDiv{
    margin: 1em;
}
4

3 に答える 3

7 
div { box-sizing: border-box; }

ただし、これは IE の特定のバージョンではサポートされていません。

于 2012-04-15T13:34:06.510 に答える
1

<div>自動幅のある、つまり親要素の幅に自動的に拡大する場合、パディングを追加しても幅は増加しません。それは高さを増加させます、それはもちろん避けられません。要素に固定幅を設定した場合にのみ幅が増加し、合計幅はになりますwidth + padding。その場合は、設定した幅から追加したパディングを差し引いてください。

于 2012-04-15T13:37:19.603 に答える
1

内部 div を追加することは、多かれ少なかれ良い解決策です。プロパティはありbox-sizingますが、サポートが不足しています。

この件に関する記事は次のとおりです。

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

そして、これは古い IE バージョン用のポリフィル (パッチ) です。ただし、パフォーマンスにどのように影響するかはわかりません。慎重に使用することをお勧めします。

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

于 2012-04-15T13:34:26.280 に答える