Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Отступы внутри блока

Автор: dwar 13.10.2013, 00:19

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

Код


<style>
.block {
   height: inherit;
   width: inherit;
}
.block-padding {
   padding: 10px;
}
</style>

<div class="block">
    <div class="block-padding">

   </div>
</div>

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

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

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

Автор: dwar 13.10.2013, 01:11

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

Код


<style>
parent-block {
   display: table;
   height: inherit;
   width: inherit;
}
.block {
   display: table-cell;
   padding: 1em;
}
</style>
<div class="parent-block">
   <div class="block">

       * Динамическое содержимое *

   </div>
</div>

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

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

Автор: ksnk 13.10.2013, 10:24

Может так?

Код


parent-block {
   overflow:hidden;
   height: 100%;
   width: 100%;
}

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

Автор: skyboy 13.10.2013, 23:27

Цитата(dwar @ 12.10.2013, 23:19

)

сделать отступы внутри блока таким образом, чтоб его ширина и высота оставалась неизменной

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

Автор: dwar 20.10.2013, 00:05

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