- Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB - http://cmsart.ru -
Внешние и внутренние отступы блоков, разночтение
Posted By Archi On 24.07.2012 @ 9:45 пп In HTML-верстка | No Comments
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; из описания блока. Все работает.
Для справки. Ширина всего контейнера равна: левый внешний отступ + ширина левой рамки + ширина левого внутреннего отступа + ширина содержимого + ширина правого внутреннего отступа + ширина правой рамки + ширина правого внешнего отступа. О методах «силового» выхода из данной ситуации поговорим в будущем.
Источник: internet-technologies.ru [1]
Article printed from Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB: http://cmsart.ru
URL to article: http://cmsart.ru/articles/html-articles/vneshnie-i-vnutrennie-otstupyi-blokov-raznochtenie
URLs in this post:
[1] internet-technologies.ru: http://cmsart.ru/goto/http://www.internet-technologies.ru
Click here to print.
Copyright © 2012 Поддержка CMS | Документация, статьи по Joomla, Drupal, phpBB. All rights reserved.