... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Форматирование блоков. Отступы (стр. 1)

 

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?


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

Свойства padding-top, padding-right, padding-bottom, padding-left

Индивидуальные свойства, позволяющие задать размеры отступов для каждой стороны в отдельности.

  • padding-top - ширина верхнего поля.
  • padding-right - ширина правого поля.
  • padding-bottom - ширина нижнего поля.
  • padding-left - ширина левого поля.
Значения свойств могут задаваться в произвольных единицах длины или в процентах. Проценты вычисляются относительно ширины сгенерированного элементом блока. отступов в качестве значений не допускается задание отрицательных величин - в отличие от полей, где отрицательные значения допустимы.

Свойства padding

Это стенографическое свойство используется для краткой записи значений свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding может иметь одно, два, три или четыре значения. Значения присваиваются также, как для полей и границ. Рассмотрим такой код:

Р { background-color:#FFC; border:1px solid blue; padding:0.5em 1em; }

Ha примере этого абзаца рассмотрим, как работают отступы. В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа.

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

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0,5 em сверху и снизу и по 1 em слева и справа

 

В стиле для элемента P указано, что фон его блока светло-желтый, вокруг блока имеется синяя граница толщиной 1 пиксель, размеры отступов по 0 em сверху, снизу, слева и справа


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

Различные отступы для отдельных сторон блока можно задавать при помощи именных свойств:

Р { padding-top: 0.5em; padding-right: 10рх; padding-bottom: 3%; padding-left: 1em; }

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

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены