divの内部のテキストをパッドするCSSプロパティ

Question

div要素のボーダーの内側にいくつかのパディングを付ける方法はありますか？例えば、私のメインのdiv要素の中のすべてのテキストは現在、要素の境界線の端まで右に移動します。このサイトの一般的なルールとして、テキストと境界線の間に少なくとも10〜20ピクセルのスペースが必要です。

Answer 1

divの幅から減算するか、またはボックスサイズを使用しますが、必要なのは、問題のdivの子要素を埋め込むだけです。あなたはこのようないくつかのマークアップを持っているのであれば、例えば、：

<div id="container"> 
    <p id="text">Find Agents</p> 
</div> 

をあなたがする必要があるのは、このCSSを適用している。ここで

#text { 
    padding: 10px; 
} 

は違いを示すフィドルです：http://jsfiddle.net/CHCVF/2/

また、複数の要素があり、同じクラスをすべて与えるような気がしない場合は、次のようにすることができます。

.container * { 
    padding: 5px 10px; 
} 

すべての子要素を選択し、必要な詰め物を割り当てます。これは実際の動作のバイブルです：http://jsfiddle.net/CHCVF/3/

Answer 2

ちょうどあなたの元div幅からdiv { padding: 20px; }とsubstract 40pxを使用します。ここでは

画面は、私が現在持っているもの説明するために撮影します。

フィリップ・ウィルズは指摘のように、あなたも40pxをsubstractingのではなく、box-sizingを使用することができます。

div { 
    padding: 20px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

-moz-box-sizingは、Firefox用です。

Answer 3

埋め込みはDiv内に余白を追加する方法です。
はちょうどあなたが本部の元の幅から-20pxしなければならない、

div { padding-left: 20px; } 

使用し、サイズをmantainします。

Answer 4

あなたが探しているCSSプロパティはパディングです。 パディングの問題は元の要素の幅に追加することです。したがって、幅が300pxのdivがあり、それに10pxのパディングを追加すると、幅は320pxになります（左に10px、左に10px右側に）。

これを防ぐには、ボックスサイズ：border-boxを追加します。 divには、パディングを追加しても指定された幅を維持します。 だからあなたのCSSは次のようになります。

div { 
    box-sizing: border-box; 
    padding: 10px; 
} 

あなたはボックスのサイズ変更についての詳細を読むことができますし、それはここで全体のブラウザのサポートです：

あなたを持って、私はここに答えの多くを見る

http://www.paulirish.com/2012/box-sizing-border-box-ftw/