Внутренний отступ CSS

Внутренний отступ этого элемента составляет 70px.

Внутренний отступ CSS

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

С помощью CSS можно полностью контролировать внутренний отступ (заполнение).有一些属性可以为元素的 каждую сторону (верх, правая, нижняя и левая) установить внутренний отступ.

Padding - отдельные стороны

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

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

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

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

Совет:Запрещены отрицательные значения.

Пример

Установить разные внутренние отступы для всех четырёх сторон элемента <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Попробуйте сами

Padding - сокращённое свойство

Для уменьшения кода можно указать все свойства внутреннего отступа в одном свойстве.

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

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

Принцип работы следующий:

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

  • padding: 25px 50px 75px 100px;
    • Верхний внутренний отступ равен 25px
    • Правый внутренний отступ равен 50px
    • Нижний внутренний отступ равен 75px
    • Левый внутренний отступ равен 100px

Пример

Использование краткой формы свойства padding с заданными четырьмя значениями:

div {
  padding: 25px 50px 75px 100px;
}

Попробуйте сами

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

  • padding: 25px 50px 75px;
    • Верхний внутренний отступ равен 25px
    • Правый и левый внутренние отступы равны 50px
    • Нижний внутренний отступ равен 75px

Пример

Использование краткой формы свойства padding с заданными тремя значениями:

div {
  padding: 25px 50px 75px;
}

Попробуйте сами

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

  • padding: 25px 50px;
    • Верхний и нижний внутренние отступы равны 25px
    • Правый и левый внутренние отступы равны 50px

Пример

Использование краткой формы свойства padding с заданными двумя значениями:

div {
  padding: 25px 50px;
}

Попробуйте сами

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

  • padding: 25px;
    • Все четыре внутренние отступы равны 25px

Пример

Использование краткой формы свойства padding с заданным значением:

div {
  padding: 25px;
}

Попробуйте сами

Внутренний отступ и ширина элемента

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

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

Пример

Здесь ширина элемента <div> составляет 300px. Однако, фактическая ширина <div> элемента будет 350px (300px + левый внутренний отступ 25px + правый внутренний отступ 25px):

div {
  width: 300px;
  padding: 25px;
}

Попробуйте сами

Чтобы поддерживать ширину 300px, независимо от объема заполнения, вы можете использовать box-sizing Свойство. Это приведет к тому, что элемент будет поддерживать свою ширину. Если добавить внутренний отступ, то доступное пространство для содержимого уменьшится.

Пример

Использование свойства box-sizing для поддержания ширины 300px, независимо от объема заполнения:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Попробуйте сами

Более примеров

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

Все CSS свойства внутреннего отступа

Свойство Описание
padding Краткая форма свойства для установки всех свойств внутреннего отступа в одном заявлении.
padding-bottom Установить нижний внутренний отступ элемента.
padding-left Установить левый внутренний отступ элемента.
padding-right Установить правый внутренний отступ элемента.
padding-top Установить верхний внутренний отступ элемента.

Дополнительное чтение

Дополнительная литература:Модель рамки: отступы CSS