Есть блок с фиксированой высотой и шириной. Блок получает высоту и ширину от родительского блока. Внутри блока находится динамическое содержимое. Задача состоит в том чтоб сделать отступы внутри блока таким образом, чтоб его ширина и высота оставалась неизменной. Попытался решить проблему следующим образом:



При этом block увеличивается на 20px в высоту и ширину.

Что делаю не так?

PS: при использовании параметра margin та же ситуация.
PPS: внутреннее содержимое - динамическое. Задавать параметры тому что внутри - не вариант.

Это сообщение отредактировал(а) dwar - 13.10.2013, 00:24

Хм.. решил проблему самостоятельно, только совсем иначе. Родительскому блоку, от которого раньше брал значения width и height задал параметр display: table;
Теперь выглядит так:



Вроде все адекватно отображается. Проблема теперь в старых браузерах и в IE адекватно все это отобразить.

PS: Мда... теперь все другие элементы внутри этого блока которым заданы padding либо margin увеличивают ширину и длину блока. Как можно избавиться от этого <ВЦ>?

Это сообщение отредактировал(а) dwar - 13.10.2013, 01:17

Может так?


Выложи на jsFiddle.com примерчик, когда плохо и когда хорошо. Иначе непонятно местами, о чем вообще речь идет.

чуется мне, что речь о той самой особенности расчета размера, которая решается с помощью box-sizing. Если надо в старых браузерах, делаешь margin вместо padding'a. и убери width/height: inherit. это вообще не о том.

Спасибо большое) разобрался самостоятельно) поубирал width / height и все встало на свои места.