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