Блочная модель документа / Внутренние отступы, свойство padding [4/23]
×

Внутренние отступы, свойство padding [4/23]

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

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

padding: 10px;
padding: 5px 10px;
padding: 5px 10px 15px;
padding: 5px 10px 15px 20px;
  1. Одинаковые отступы со всех сторон.

  2. Отступы сверху и снизу 5px, справа и слева 10px.

  3. Отступ сверху 5px, слева и справа 10px, снизу 15px.

  4. Разные отступы со всех сторон, в порядке верхний, правый, нижний, левый.

Также можно задавать отступы для разных сторон с помощью свойств padding-left, padding-right, padding-top, padding-bottom.

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

В задании внутренние отступы блоков сделаны прозрачными.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Внутренние отступы, padding</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="p1">Блок 1</div> <div class="p2">Блок 2</div> <div class="p3">Блок 3</div> <div> <span class="p1">Текст 1</span> <span class="p2">Текст 2</span> <span class="p3">Текст 3</span> </div> </body> </html>
CSS
div { width: 276px; height: 16px; margin: 20px; font-size: 12px; } .p1 { } .p2 { } .p3 { }
HTML Academy

Добавьте в указанные CSS-правила свойство padding:

  1. для класса p1 — padding: 10px;,
  2. для класса p2 — padding: 10px 20px;,
  3. для класса p3 — padding: 10px 20px 30px;.

Обратите внимание на поведение строчных элементов.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.