» Форма входа

»Мoy-weB ver.4.1

» Статистика

 Главная » 2008 » Сентябрь » 20 » Внешние и внутренние отступы блоков, разночтение

Внешние и внутренние отступы блоков, разночтение
20.Сен.2008 | 17:36:42

Внешние и внутренние отступы блоков, разночтение


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;
из описания блока. Все работает.

Для справки. Ширина всего
контейнера равна: левый внешний отступ + ширина левой рамки + ширина
левого внутреннего отступа + ширина содержимого + ширина правого
внутреннего отступа + ширина правой рамки + ширина правого внешнего
отступа. О методах "силового" выхода из данной ситуации поговорим в
будущем.
Категория: Статьй и уроки | Просмотров: 509 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]