box-size + child object - html, css3, parent-child, css

Сьогодні це дуже дратує мене. Що я хочу зробити, це контролювати розмір дочірнього об'єкта, використовуючи 100% батьківського мінус, наприклад, 10 px, за допомогою методу коробки.

Я знаю, що можна скористатися функцією визначення розміру вікна з батьківським і 10 px відправкою, а потім встановити дитину на 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;
}

Відповіді:

Зараз це єдиний безпечний шлях. Як альтернатива, ви можете використовувати вирази значення css3, такі як calc (), але не всі браузери підтримують це.

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

Приклади можна знайти на сторінці w3c "Значення CSS3" http://www.w3.org/TR/css3-values/#calc0