Заполнение CSS
Заполнение используется для создания пространства вокруг содержимого элемента внутри любых определенных границ.
Заполнение CSS
Свойства заполнения CSS используются для создания пространства вокруг содержимого элемента внутри любых определенных границ.
С помощью CSS вы полностью контролируете заполнение. Существуют свойства для настройки заполнения для каждой стороны элемента (сверху, справа, снизу и слева).
Заполнение - Отдельные стороны
В CSS есть свойства для указания заполнения для каждой стороны элемента:
Все свойства заполнения могут иметь следующие значения:
length - задает заполнение в пикселях, pt, см и т.д.
% - задает заполнение в % от ширины содержащего элемента
inherit - указывает, что заполнение должно быть унаследовано от родительского элемента
Примечание: Отрицательные значения не допускаются.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Свойство заполнения - сокращенное значение
Чтобы сократить код, можно указать все свойства заполнения в одном свойстве.
Свойство заполнения является сокращенным свойством для следующих отдельных свойств заполнения:
Если свойство padding имеет четыре значения:
Пример
Используйте свойство padding shorthand с четырьмя значениями:
div {
padding: 25px 50px 75px 100px;
}
Если свойство padding имеет три значения:
Пример
Используйте свойство padding shorthand с тремя значениями:
div {
padding: 25px 50px 75px;
}
Если свойство padding имеет два значения:
Пример
Используйте свойство padding shorthand с двумя значениями:
Если свойство padding имеет одно значение:
Пример
Используйте свойство shorthand padding с одним значением:
Прокладка и ширина элемента
Свойство CSS width определяет ширину области содержимого элементов. Область содержимого - это часть внутри заполнения, границы и отступа элемента (модель box).
Таким образом, если элемент имеет указанную ширину, дополнение, добавленное к этому элементу, будет добавлено к общей ширине элемента. Это часто является нежелательным результатом.
Пример
Здесь элементу <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;
}