[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

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

Для справки. Ширина всего контейнера равна: левый внешний отступ + ширина левой рамки + ширина левого внутреннего отступа + ширина содержимого + ширина правого внутреннего отступа + ширина правой рамки + ширина правого внешнего отступа. О методах "силового" выхода из данной ситуации поговорим в будущем.

Автор: Алямкин Илья Юрьевич
Источник: mtk.on.ufanet.ru



Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 4354 сегодня - 1

История про CSS (часть II)
05-01-2010   

Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее

Кол. просмотров: общее - 4438 сегодня - 1

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 4368 сегодня - 1

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 4298 сегодня - 1

Сокращенные команды в CSS
05-01-2010   

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее

Кол. просмотров: общее - 5058 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects