CSS Отступы
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
Попробуйте сами »
CSS Padding - Отступ
CSS свойство padding используется для создания пространства вокруг содержимого элемента внутри любых определенных границ.
Из CSS у вас есть полный контроль над отступами. Есть свойства для установки отступов для каждой стороны элемента (сверху, справа, снизу и слева).
Отступ - Отдельные стороны
CSS имеет свойства для указания отступов для каждой стороны элемента:
padding-top- отступ сверхуpadding-right- отступ справаpadding-bottom- отступ снизуpadding-left- отступ слева
Все padding-свойства могут иметь следующие значения:
- length (длина) - указывает отступ в px, pt, cm и т.д.
- % (проценты) - задает отступ в % от ширины содержащего элемента
- inherit (наследование) - указывает, что отступ должен быть унаследован от родительского элемента
Примечание: Отрицательные значения не допускаются.
Пример
Установите разные отступы для всех четырех сторон элемента <div>
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Попробуйте сами »
Padding - Сокращенные свойства
Чтобы сократить код, можно указать все свойства padding в одном свойстве.
Свойство 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;
}
Попробуйте сами »
Padding и элемент Width (ширина)
CSS свойство width определяет ширину области содержимого элемента. Область содержимого - это часть внутри отступа, границы и поля элемента (box model).
Таким образом, если элемент имеет указанную ширину, отступ, добавленный к этому элементу, будет добавлен к общей ширине элемента. Это часто нежелательный результат.
Пример
Здесь элемент <div> имеет ширину 300 пикселей. Однако фактическая ширина элемента <div> будет 350px (300px + 25px для левого отступа + 25px для правого отступа):
div {
width: 300px;
padding: 25px;
}
Попробуйте сами »
Чтобы сохранить ширину в 300 пикселей, независимо от величины заполнения, вы можете использовать свойство box-sizing. Это заставляет элемент сохранять свою ширину; если вы увеличите отступ, доступное пространство контента уменьшится.
Пример
Используйте свойство box-sizing, чтобы ширина составляла 300 пикселей независимо от размера отступа:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Попробуйте сами »
Больше примеров
Установите левый отступ
Этот пример демонстрирует, как установить левый отступ элемента <p>.
Установите правый отступ
Этот пример демонстрирует, как установить правый отступ элемента <p>.
Установите верхний отступ
Этот пример демонстрирует, как установить верхний отступ элемента <p>.
Установите нижний отступ
Этот пример демонстрирует, как установить нижний отступ элемента <p>.
Проверьте себя с помощью упражнений!
Все свойства CSS Padding
| Свойство | Описание |
|---|---|
| padding | Сокращенное свойство для установки всех свойств psdding в одном объявлении |
| padding-bottom | Устанавливает нижний отступ элемента |
| padding-left | Устанавливает левый отступ элемента |
| padding-right | Устанавливает правый отступ элемента |
| padding-top | Устанавливает верхний отступ элемента |