Мы выстроили содержимое шапки в две колонки, как на макете. Но в шапке не хватает «воздуха». Чтобы элементы не прилипали к границам бокса, ему нужно добавить внутренние отступы.

Внутренним отступом называют расстояние между содержимым бокса и рамкой.

Внутренние отступы у элемента создают с помощью свойства padding. Если внутренние отступы одинаковы со всех сторон, то достаточно написать так:

.element {
  padding: 15px;
}

Код в примере задаст элементу внутренние отступы 15px со всех сторон. Такую запись называют краткой. Есть и другие виды краткой записи, о них мы поговорим чуть позже.

Если отступы с разных сторон различаются, то используют полную запись, указывая внутренний отступ отдельно для каждой стороны:

.element {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

Свойство padding-top создаёт внутренний отступ сверху, padding-right — справа, padding-bottom — снизу, а padding-left — слева.

Необязательно задавать элементу внутренние отступы со всех сторон. Например, если внутренний отступ нужен только сверху, то достаточно использовать лишь padding-top.

Взглянем на макет шапки.

С разных сторон в шапке разные отступы. Чтобы задать их, используем полную запись.

.element {
  padding: 15px;
  padding-bottom: 30px;
}