Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Отступы внутри блока 
:(
    Опции темы
dwar
  Дата 13.10.2013, 00:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 13.10.2013

Репутация: нет
Всего: нет



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

Код

<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, 00:24
PM MAIL   Вверх
dwar
Дата 13.10.2013, 01:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 13.10.2013

Репутация: нет
Всего: нет



Хм.. решил проблему самостоятельно, только совсем иначе. Родительскому блоку, от которого раньше брал значения 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 увеличивают ширину и длину блока. Как можно избавиться от этого <ВЦ>?

Это сообщение отредактировал(а) dwar - 13.10.2013, 01:17
PM MAIL   Вверх
ksnk
Дата 13.10.2013, 10:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6851
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 385



Может так?
Код

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


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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
skyboy
Дата 13.10.2013, 23:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260



Цитата(dwar @  12.10.2013,  23:19 Найти цитируемый пост)
сделать отступы внутри блока таким образом, чтоб его ширина и высота оставалась неизменной

чуется мне, что речь о той самой особенности расчета размера, которая решается с помощью box-sizing. Если надо в старых браузерах, делаешь margin вместо padding'a. и убери width/height: inherit. это вообще не о том.
PM MAIL   Вверх
dwar
Дата 20.10.2013, 00:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 13.10.2013

Репутация: нет
Всего: нет



Спасибо большое) разобрался самостоятельно) поубирал width / height и все встало на свои места.
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1067 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.