ボーダー、パディング、マージンを動的なサイズ（パーセンテージ）で管理する方法は？

Question

私の質問は、パーセンテージで要素のサイズを管理する方法です（divと言う）。私は2つのdivを並べて作成し、両方ともdivを含むdivの50％を取る状況があります。これら2つのdivのそれぞれは、1px、5pxのマージン、いくつかのパディングの境界線を持っています。だから私はどのようにこれらの静的なサイズとコンテンツ（divs）の動的なサイズを管理することになっています。私が言及したケースでは、ボーダー、パディング、マージンが大きすぎて（100％）並べて浮動しないためです。

解決策は何ですか？私の場合、マージン/パディング/ボーダーのサイズは小さいので、ちょうどサイズを少し小さく（45％のように）設定し、それが適合することを期待できます。しかし、私はこの方法がお粗末だと思う。なぜなら、パディングのサイズを高く設定すると、完全なサイズが見つかるまで、試行錯誤でdivのサイズを調整しなければならないからです。これを達成する適切な方法はありますか？

ありがとうございます。 50％が、その後のマージンを追加するために、内側+パディング+ボーダー、残念ながらありません設定に適用されるように、境界ボックス：

Answer 1

クリーンな作業が0マージンと0の境界線との2つの浮動divを作ることによって行うことができる例です。 それぞれの内側には、コンテナに収まるdivを静的なマージンと埋め込みで配置することができます。

代わりに、すべてを動的に保つことができるので、margin：1％のようなものを入力すると、ウィンドウのサイズ変更でうまく動作します！

Answer 2

/* support Firefox, Safari/WebKit, Opera and IE8+ */ 

.example { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
} 

https://developer.mozilla.org/En/CSS/Box-sizingからは、ボックスのサイズ変更を使用することができます。

div内でdivを使用し、外側divのパディングを使用してマージンを模倣することはできます。

は、ここではわずか50％に幅、JSFiddle