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

Внешние отступы, свойство margin [5/23]

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

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

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

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

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

  4. Верхний, правый, нижний, левый отступы соответственно.

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

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

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Внешние отступы, свойство margin</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="out"> <div class="m1">Блок 1</div> <div class="m2">Блок 2</div> <div class="m3">Блок 3</div> </div> <div class="out"> <span class="m1">Текст 1</span><br/> <span class="m2">Текст 2</span><br/> <span class="m3">Текст 3</span><br/> </div> </body> </html>
CSS
.out { width: 276px; margin: 20px; } .m1 { } .m2 { } .m3 { }
HTML Academy

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

  1. для класса m1 — margin: 10px;,
  2. для класса m2 — margin: 10px 20px;,
  3. для класса m3 — margin: 10px 20px 30px;.

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

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

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

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

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

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