Внешние и внутренние отступы блоков, разночтение
Дата публикации: 10/06/2003
Категория: CSS - каскадные таблицы стилей
Версия для печати
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px;
PADDING-RIGHT: 0px; PADDING-TOP: 0px;
Это описание внутренних отступов блока —
то расстояние, которое будет между рамкой
блока и содержимым. Почти так мы писали и в BODY,
чтоб начать страницу от края экрана.
margin-bottom: 5px; margin-left: 5px;
margin-right: 5px; margin-top: 5px;
Это описание внешних отступов блока — все
это сильно похоже на CELLPADDING и CELLSPACING
в описании таблицы.
В чем вы будете задавать отступы — ваше
личное дело. Можно применять проценты,
можно пикселы, можно другие единицы,
принятые в CSS.
Стенографическое описание
margin: 12px 12px 12px 12px; описывает
верхний, правый, нижний, левый внешние
отступы.
margin: 12px 12px 12px; описывает верхний,
левый и правый, нижний отступы.
margin: 12px 12px; описывает верхний и
нижний и правый и левый отступы.
margin: 12px; все внешние отступы по 12px.
Точно так-же записываются и внутренние
отступы.
Теперь о "разнице восприятия".
Предположим, мы задали ширину блока в 300
пикселей, вставили в блок "кучку"
текста, смотрим итог— ага, все хорошо, вот
только текст вплотную примыкает к рамке
нашего блока. Надо исправить. Делаем это
просто— в описании блока добавляем: padding:
50px; Открываем Эксплорер, смотрим— все
нам нравится, все путем. Теперь открываем
Опера5 или Нетскейп6. О-о-о!. Что-то "разнесло"
наш блок! Такой молодой, а такой толстый... С
чего бы это...
Если вы проделаете все так, как описано
мной, поставте на страничку выше блока
таблицу шириной в те-же 300 пикселей.
Поставили? Все поняли? Если нет— поясняю.
Эксплорер взял наш блок, вогнал в него по 50
пиксел отступов с каждой стороны, при этом
ужав ширину текстовой области до 200 и,
довольный, на этом успокоился.
Что-же сделали Опера с Нетскейпом? Они
оставили без изменения ширину текстового
поля и прибавили с каждой стороны по 50
пиксел, в результате весь наш блок "прибавил"
в ширине лишнюю сотню. Самое интересное, что
они в этом правы! Именно так и надо
поступать в соответствии с принятыми
стандартами. Это тот случай, в котором
Эксплорер "облажался". Говорят, новый
шестой Эксплорер так-же "лажается".
Нас, правда, не должно это беспокоить, у
нас своих проблем хватает. Что делать? Есть
два варианта. Первый— обойти ошибку, второй—
исправить ее своими силами.
На этом сайте я просто "в гору не пошел".
А зачем? Если мы не можем свободно
использовать внутренний отступ самой "коробки",
то мы можем применить внешний отступ к
содержимому. Прописываем margin: 50px; для
параграфа текста, который будет в нашей
ячейке и убираем padding: 50px; из описания
блока. Все работает.
Для справки. Ширина всего
контейнера равна: левый внешний отступ +
ширина левой рамки + ширина левого
внутреннего отступа + ширина содержимого +
ширина правого внутреннего отступа +
ширина правой рамки + ширина правого
внешнего отступа.
О методах "силового" выхода из данной
ситуации поговорим в будущем.
Алямкин
Илья Юрьевич
S.T.Y.L.E.mtk.on.ufanet
Статьи по теме:
