Внутренние отступы

Взгляните на пример из прошлого урока. Мы вывели текст на сером фоне, при этом он «приклеен» к блоку, в котором размещается.

Текст, который будет выведен на сером фоне

Для того, чтобы дать больше пространства тексту, используются внутренние отступы. Внутренний отступ указывается с помощью правила padding, которое может принимать 4 значения:

  • отступ сверху;
  • отступ справа;
  • отступ снизу;
  • отступ слева.
<style>
  .gray-background {
    background-color: #ededed;
    padding: 20px 20px 20px 20px;
  }
</style>

<div class="gray-background">
    Текст, который будет выведен на сером фоне с отступами по 20 пикселей с каждой стороны.
</div>
Текст, который будет выведен на сером фоне с отступами по 20 пикселей с каждой стороны.

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

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

Таким образом можно пример выше записать следующим образом:

<style>
  .gray-background {
    background-color: #ededed;
    padding: 20px;
  }
</style>

<div class="gray-background">
    Текст, который будет выведен на сером фоне с отступами по 20 пикселей с каждой стороны.
</div>

Задание

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

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

Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.