Поиск…


Синтаксис

  • 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;

замечания

Свойство padding задает заполняющее пространство со всех сторон элемента. Область заполнения - это пространство между содержимым элемента и его границей. Отрицательные значения не допускаются .

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>

введите описание изображения здесь



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow