Теория
Теория

Внешние отступы, свойство margin

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

Внешние отступы для разных сторон задаются с помощью свойств margin-top, margin-right, margin-bottom и margin-left:

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

Сокращённое свойство margin работает аналогично свойству padding, только задаёт внешние отступы, а не внутренние:

margin: 10px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;

Одинаковые отступы со всех сторон.
Сверху и снизу 5px, справа и слева 10px.
Сверху 5px, слева и справа 10px, снизу 15px.
Верхний, правый, нижний, левый отступы соответственно.

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

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Внешние отступы, свойство margin</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.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: 280px; margin: 20px; } .m1 { } .m2 { } .m3 { }

ЗадачиВыполнено

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

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

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

Внешние отступы, свойство margin

Вход

Регистрация

Восстановление доступа