HTML/CSS: Внутренние отступы

• Сокращённое свойство

Рассматривая различные блоки, которые были созданы на протяжении всех уроков можно заметить, что текст «прилипает» к краям блоков. Например:

Вы можете сказать, что в самих уроках примеры обычно выглядят не так и будете правы. В каждом примере, чтобы добавить «воздуха» использовались внутренние отступы от краёв блока.

Для создания внутренних отступов используется 4 правила:

• padding-top — внутренний отступ сверху
• padding-right — внутренний отступ справа
• padding-bottom — внутренний отступ снизу
• padding-left — внутренний отступ слева

Каждое свойство принимает числовое значение и единицу измерения, например пиксели

<div class="card">Карточка с белым текстом на фиолетовом фоне</div>

.card {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;

  color: #ffffff;
  background-color: #673ab7;
}

Сокращённое свойство

Если нужно установить отступы по всем сторонам, то используют не 4 разных свойства, а одно — padding. Оно является сокращением от уже известных свойств и позволяет установить:

• отступ сверху
• отступ справа
• отступ снизу
• отступ слева

Порядок указания важен и соответствует тому, как он указан выше. Если переработать пример выше, то он будет выглядеть так:

.card {
  padding: 10px 0 10px 20px;

  color: #ffffff;
  background-color: #673ab7;
}

Помимо такой записи для удобства существуют сокращённые записи этих правил:

• Если указать только одно значение, то оно будет использовано одновременно для всех сторон
• Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
• Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу

Задание

Добавьте в редактор параграф с классом padding и установите внутренние отступы:

• 10 пикселей сверху
• 15 пикселей снизу
• 20 пикселей слева и справа

Используйте следующий текст для параграфа:

Сам текст не имеет значения и не проверяется. Основная цель — добавить текст, который будет расположен в несколько строк. Это поможет корректно увидеть левые и правые отступы.

Добавьте черный фон к параграфу и белый цвет текста. Попробуйте различные значения свойства padding для того, чтобы увидеть как это влияет на блок.

Стили запишите в теге <style>