divをマージンとパディング付きで、親を埋める必要があります

Question

コンテナdiv（幅と高さをピクセル単位で設定しています）があります。

親の全体を塗りつぶしても余白や詰め物が残っている子divを追加する方法はありますか？

親のdivが200px、200pxの高さであるとします。

divに100％の幅/高さを指定した場合、コンテンツのサイズが200pxであることを前提としています。次に、パディングまたは余白を追加すると、子のサイズが大きくなります親。

私は...子のdivのコンテンツ領域は、これまで各側に5pxの余白を取り出した後に残っているものであることを

とは* 5pxの200pxのから2を引くために私に教えないでくださいしたい - Iそれを知っているが、私はより良い解決策を探している。 http://jsfiddle.net/Rnf82/：

それは... CSSがこのような単純なタスクを処理できないことを、このような

Answer 1

は、次の操作を試みることができる：

#outer { 
    width: 200px; 
    height: 200px; 
    background: blue; 
    position: relative; 
} 

.inner { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
    bottom: 5px; 
    left: 5px; 
} 

デモ：http://jsfiddle.net/wYNYh/1/

Answer 2

何かだろうか？

Answer 3

外側のdivのパディングを設定できます。その後、内部のdivは残っているものだけを占有します。

はこれを見ている：本当にこれをやって、これらの2つの方法（try yourself at jsFiddle）

.outer { 
width: 200px; 
height: 200px; 
background-color: #DD0000; 
padding: 5px; 
box-sizing: border-box; 
} 
.inner { 
width: 100%; 
height: 100%; 
background-color: #0000DD; 
} 

<div class="outer"> 
    <div class="inner"></div> 
</div> 

を限り問題が懸念しているような等価です。 htmlとcss標準がどのように設定されているかによって生成される冗長性を覚えておくことが重要です。

Answer 4

ボックスのサイズ変更、あなたのスタイルシートのborder-boxとして持っているすべての要素を設定します。

これは、すべての要素の埋め込みを合計します。したがって、埋め込みを追加した場合の混乱を心配する必要はありません。

*{box-sizing: border-box;}