CSS -заполнение
Отступы используются для создания пространства вокруг содержимого элемента внутри любых определенных границ.
CSS-заполнение
Свойства CSS padding
используются для создания пространства вокруг содержимого элемента внутри любых определенных границ.
С CSS у вас есть полный контроль над отступами. Существуют свойства для установки отступов для каждой стороны элемента (сверху, справа, снизу и слева).
Прокладка - отдельные стороны
В CSS есть свойства для указания отступов для каждой стороны элемента:
padding-top
padding-right
padding-bottom
padding-left
Все свойства заполнения могут иметь следующие значения:
- длина — указывает отступ в 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
свойство имеет четыре значения:
- отступ: 25px 50px 75px 100px;
- верхний отступ 25px
- правый отступ 50px
- нижний отступ 75px
- левый отступ 100px
Пример
Используйте сокращенное свойство padding с четырьмя значениями:
div {
padding: 25px 50px 75px 100px;
}
Если padding
свойство имеет три значения:
- отступ: 25px 50px 75px;
- верхний отступ 25px
- правое и левое отступы 50px
- нижний отступ 75px
Пример
Используйте сокращенное свойство padding с тремя значениями:
div {
padding: 25px 50px 75px;
}
Если padding
свойство имеет два значения:
- отступ: 25px 50px;
- верхние и нижние отступы 25px
- правое и левое отступы 50px
Пример
Используйте сокращенное свойство padding с двумя значениями:
div {
padding: 25px 50px;
}
Если padding
свойство имеет одно значение:
- отступ: 25 пикселей;
- все четыре отступа 25px
Пример
Используйте сокращенное свойство padding с одним значением:
div {
padding: 25px;
}
Отступы и ширина элемента
Свойство 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
Property | Description |
---|---|
padding | A shorthand property for setting all the padding properties in one declaration |
padding-bottom | Sets the bottom padding of an element |
padding-left | Sets the left padding of an element |
padding-right | Sets the right padding of an element |
padding-top | Sets the top padding of an element |