Создание сайтов с нуля - урок 11 - Свойства CSS: margin, padding, border, outline, box-sizing

Свойство padding

Свойство padding задает внутренние отступы элемента - отступы от внешней границы элемента до его содержания.

Существует несколько способов записи свойства padding.

Обычный способ:

• padding-top: 5px;
• padding-right: 10px;
• padding-bottom: 15px;
• padding-left: 20px;

Сокращенный способ: padding: 5px 10px 15px 20px;

Кроме того, в зависимости от значений, последнюю запись можно еще сокращать.

Обратите внимание, что для строчных элементов вертикальные отступы не задаются.

Свойство margin

Свойство margin задает внешние отступы элемента - отступы от внешней границы элемента до границ родительского элемента или до соседних элементов.

Способы записи свойства margin аналогичны свойству padding.

Обратите внимание, что строчные элементы реагируют только на горизонтальные отступы.

Свойство border

Рамка задаётся с помощью свойства border, которое состоит из трёх компонентов: ширина рамки, стиль рамки, цвет.

Рамку можно задавать и строчным, и блочным элементам.

Свойство box-sizing

Свойство box-sizing  изменяет алгоритм расчета размеров элемента:

• content-box - значение по умолчанию, соответствует стандартной блочной модели;
• border-box - изменяет режим расчета размеров элемента, при котором, например, свойство width задает не ширину содержимого, а ширину всего элемента, включая внутренние отступы и границы.