Основы CSS

Модель коробки CSS

Основы CSS3

Референсруководство CSS

Правила @ CSS

Border CSS (Border)Маржина CSS (Маржина)

Заполнение CSS (Заполнение)

Свойство padding CSS - это сокращенная форма, которая определяет пространство между рамкой элемента и его содержимым, то есть внутренним отступом сверху и снизу, справа и слева.

Свойство padding CSS

Свойство padding CSS позволяет вам определить зону заполнения, которая отделяет рамку от содержимого элемента. Заполнение зависитbackground-colorвлияет на рамку.

Определение наполнения для каждой стороны

Вы можете легко определить различные значения наполнения для различных сторон элемента (например, сверху, справа, снизу или слева) с помощью отдельного свойства padding в CSS.

Пример

h1　{
　　　　padding-bottom:　10px;
}
p　{
　　　　padding-top:　20px;
　　　　padding-left:　50px;
}

Проверьте, посмотрите </>

Сокращенная форма наполнения

Свойство padding - это сокращенная форма, чтобы избежать настройки наполнения для каждого края элемента отдельно.padding-top，padding-right，padding-bottom，padding-left。

Пример

h1　{
　　　　padding:　10px　20px;
}
p　{
　　　　padding:　10px　15px　20px　25px;
}

Проверьте, посмотрите </>

Обратите внимание:и CSS marginСвойства различны, значения padding не могут быть отрицательными. Как и у свойств margin, процентные значения padding относятся к ширине содержимого блока.

Свойство padding может принимать один, два, три или четыре значения, разделенные пробелами.

Если установленоОдно значениеТогда они применяются ко всем четырем сторонам.
Если указаноДва значенияТогда первый значок применяется сверху и снизу, а второй справа и слева.
Если указаноТри значенияТогда первый значок применяется сверху, второй справа и слева, а последний снизу.
Если указаноЧетыре значенияЕсли они указаны, то их применяют в указанном порядке: сверху, справа, снизу и слева.

Border CSS (Border)Маржина CSS (Маржина)