CSS padding

CSS отступы внутри

CSS свойство padding используются для создания пространства вокруг содержимое элемента внутри определенных границ.

С помощью CSS у вас есть полный контроль над отступами. Есть свойства для установки отступа для каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева.

Отступы - все стороны

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

• padding-top отступ сверху
• padding-right отступ справа
• padding-bottom отступ снизу
• padding-left отступ слева

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

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

Внимание: Отрицательные значения не допускаются.

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

Отступ - сокращенное свойство

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

Свойство padding является сокращенным свойством для следующих свойств отступа:

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

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

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

• padding: 25px 50px 75px 100px;
  • Отступ сверху 25px
  • Отступ справа 50px
  • Отступ снизу 75px
  • Отступ слева 100px

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

• padding: 25px 50px 75px;
  • Отступ сверху 25px
  • Отступы справа и слева 50px
  • Отступ снизу 75px

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

• padding: 25px 50px;
  • Отступы сверху и снизу 25px
  • Отступы справа и слева 50px

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

• padding: 25px;
  • Все отступы 25px

Отступ и ширина

CSS свойство width определяет ширину области содержимого элемента. Область содержимого, это часть находится внутри элементов padding, border и margin (Бокс Модель).

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

В следующем примере элементу <div> присваивается ширина 300px. Однако фактическая отображаемая ширина элемента <div> будет равна 350px (300px + 25px левого отступа + 25px правой отступа):

Для того чтобы ширина была 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing. Этот элемент заставляет сохранять свою ширину; если вы увеличиваете отступ, доступное пространство содержимого будет уменьшаться. Вот пример:

Еще примеры

Установить отступ слева
В этом примере показано, как задать отступ слева для элемента <p>.

Установить отступ справа
В этом примере показано, как задать отступ справа для элемента <p>.

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

Установить отступ снизу
В этом примере показано, как задать отступ снизу для элемента <p>.

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