CSS
набивка
Поиск…
Синтаксис
- padding: length | initial | inherit | unset;
- padding-top: length | initial | inherit | unset;
- padding-right: length | initial | inherit | unset;
- padding-bottom: length | initial | inherit | unset;
- padding-left: length | initial | inherit | unset;
замечания
1 : https://developer.mozilla.org/en/docs/Web/CSS/padding MDN
Также см. Этот вопрос : «Почему CSS не поддерживает отрицательное дополнение?» и его ответы.
Также, пожалуйста, рассмотрите модель Box при использовании прокладки. В зависимости от значения размера коробки, добавление элемента может либо добавить к ранее определенной высоте / ширине элемента, либо нет.
Связанные свойства:
Заполнение встроенных элементов будет применяться только к левому и правому элементам, а не к верхней и нижней части из-за присущих свойств отображения встроенных элементов.
Прокладка на заданной стороне
Свойство padding задает заполняющее пространство со всех сторон элемента. Область заполнения - это пространство между содержимым элемента и его границей. Отрицательные значения не допускаются.
Вы можете указать сторону отдельно:
-
padding-top
-
padding-right
-
padding-bottom
-
padding-left
Следующий код добавит отступы 5px
в начало div:
<style>
.myClass {
padding-top: 5px;
}
</style>
<div class="myClass"></div>
Сокращение
Свойство padding задает заполняющее пространство со всех сторон элемента. Область заполнения - это пространство между содержимым элемента и его границей. Отрицательные значения не допускаются.
Чтобы сохранить добавление отступов на каждой стороне отдельно (с помощью padding-top
, padding-left
т. Д.), Вы можете записать его как сокращенное, как показано ниже:
Четыре значения :
<style>
.myDiv {
padding: 25px 50px 75px 100px; /* top right bottom left; */
}
</style>
<div class="myDiv"></div>
Три значения :
<style>
.myDiv {
padding: 25px 50px 75px; /* top left/right bottom */
}
</style>
<div class="myDiv"></div>
Два значения :
<style>
.myDiv {
padding: 25px 50px; /* top/bottom left/right */
}
</style>
<div class="myDiv"></div>
Одно значение :
<style>
.myDiv {
padding: 25px; /* top/right/bottom/left */
}
</style>
<div class="myDiv"></div>