box-sizing + obiekt podrzędny - html, css3, parent-child, css

Dzisiaj bardzo mnie to denerwowało. To, co chcę zrobić, kontroluje rozmiar obiektu podrzędnego, używając 100% elementu nadrzędnego minus margines, powiedzmy 10 pikseli, przy użyciu metody sortowania pudełkowego.

Wiem, że możliwe jest użycie funkcji rozmiaru skrzynki z rodzicem i dopełnieniem 10 px, a następnie ustawienie dziecka na 100%, ale chcę wiedzieć, czy jest to możliwe na odwrót.

Oto, co mam .... W tej chwili wszystko, co się dzieje, to to, że skrzynka podrzędna jest w 100% dopasowana do obiektu nadrzędnego, margines nie jest widoczny.

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

I...

#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;
}

Odpowiedzi:

To na razie jedyna bezpieczna droga. Alternatywnie można używać wyrażeń wartości css3, takich jak calc (), ale nie wszystkie przeglądarki go obsługują.

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

Możesz znaleźć kilka przykładów na stronie "Wartości CSS3" w3c http://www.w3.org/TR/css3-values/#calc0