ボックスサイズ+子オブジェクト - html、css3、parent-child、css

今日はこれが私を悩ませています。私がやりたいことは、ボックスサイズの方法を使用して、親の100％からマージンを引いた値、たとえば10ピクセルを使用して子オブジェクトのサイズを制御することです。

親と10ピクセルのパディングでボックスサイズ関数を使用してから子を100％に設定することは可能であることを私は知っていますが、逆の方法で可能かどうかを知りたいです。

ここに私が持っているものがあります……現時点で起きることは、子ボックスがそれ自身を親オブジェクトに100％適合させるということです、マージンは見えません。

<div id="Parent">
<div id="Child">
</div>
</div>

そして...

#Parent
{
height:500px;
width:500px;
background-color:red;
}

#Child
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top:10px;
margin-left:10px;
width:100%;
height:100%;
background-color:green;
}

回答：

今のところ、これが唯一の安全な方法です。別の方法として、calc（）のようなcss3値の式を使うことができますが、すべてのブラウザがそれをサポートするわけではありません。

http://caniuse.com/#search=calc

いくつかの例がw3cの「CSS3値」ページにあります。 http://www.w3.org/TR/css3-values/#calc0