CSS набивка

CSS Отступы

Свойства CSS обивка определить белое пространство между содержанием элемента и границы элемента.

Обивка очищает область вокруг содержимого (внутри границы) элемента.

	Примечание: Заполнитель зависит от цвета фона элемента!

С помощью CSS, вы имеете полный контроль над прокладкой. Есть свойства CSS для установки отступы для каждой стороны элемента (сверху, справа, снизу и слева).

Обивка - Отдельные Стороны

CSS имеет свойства для задания отступов для каждой стороны элемента:

• padding-top
• padding-right
• padding-bottom
• padding-left

Все свойства обивка может иметь следующие значения:

• длина - задает отступ в px, pt, cm и т.д.
• % - Определяет отступ в% от ширины содержащего элемента
• наследовать - определяет, что заполнение должно быть унаследовано от родительского элемента

В следующем примере устанавливаются разные отступы для всех четырех сторон <p> элемента:

Обивка - сокращённое свойство

Чтобы сократить код, можно указать все свойства отступов в одной собственности.

padding свойство свойство является обобщающим для следующих индивидуальных свойств заполнения:

• padding-top
• padding-right
• padding-bottom
• padding-left

Итак, вот как это работает:

Если padding свойство имеет четыре значения:

• обивка: 25px 50px 75px 100px;
  • Верхний заполнитель является 25px
  • правый отступы 50px
  • нижний отступы 75px
  • Левый заполнитель является 100px

Если padding свойство имеет три значения:

• обивка: 25px 50px 75px;
  • Верхний заполнитель является 25px
  • правый и левый отступы являются 50px
  • нижний отступы 75px

Если padding свойство имеет два значения:

• обивка: 25px 50px;
  • верхний и нижний отступы являются 25px
  • правый и левый отступы являются 50px

Если padding свойство имеет одно значение:

• обивка: 25px;
  • все четыре отступы являются 25px

Еще примеры

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

Установить левый отступ
Этот пример показывает , как установить левый отступ в <p> элемента.

Установите правый отступы
Этот пример показывает , как установить правильный отступ в <p> элемента.

Установите верхний отступ
Этот пример показывает , как установить верхний отступ в <p> элемента.

Установите нижний отступы
Этот пример показывает , как установить нижний отступ в <p> элемента.

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 »

Все свойства CSS Отступы