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

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 35 из 76.

В CSS margin — это пространство вокруг элемента, находящееся за пределами любых определенных границ. Это еще одна важная часть блочной модели. Внешние отступы используются для создания пространства между элементами, отделяя их друг от друга.

Вы можете управлять внешними отступами со всех четырех сторон элемента (сверху, справа, снизу и слева) независимо или используя сокращенную запись.

Вот базовый синтаксис для использования свойства margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: Внешний отступ сверху элемента.
margin-right: Внешний отступ справа элемента.
margin-bottom: Внешний отступ снизу элемента.

margin-left: Отступ с левой стороны элемента.
value: Желаемое значение отступа, которое может быть указано в пикселях (px), em (em), процентах (%) или других допустимых единицах измерения CSS.

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

p {
    margin: 20px; /* Применяет одинаковый внешний отступ ко всем четырем сторонам */
}

div {
    margin: 10px 25px; /* Устанавливает верхний и нижний отступы в 10px, а левый и правый — в 25px */
}

.button {
    margin: 15px 30px 10px 5px;/* Устанавливает внешний отступ для каждой стороны индивидуально */
}

В этом примере все элементы <p> имеют внешний отступ 20px со всех сторон, все элементы <div> имеют верхний и нижний отступы 10px и левый и правый отступы 25px, а все элементы с классом button имеют верхний отступ 15px, правый отступ 30px, нижний отступ 10px и левый отступ 5px.

Задание

Легко

Вам дан HTML-документ с заголовком (<h1>) и блоком (<div>). Ваша задача — использовать свойство margin, чтобы добавить пространство вокруг этих элементов. Выполните следующие шаги:

Напишите CSS-правило для элемента <h1>. Установите margin равным 20px со всех сторон.
Напишите CSS-правило для элемента <div>. Установите верхний и нижний margin равным 10px, а левый и правый margin — 30px.

Шпаргалка

Свойство margin создает пространство вокруг элемента, за пределами любых границ. Вы можете управлять отступами со всех четырех сторон независимо или использовать сокращенную запись.

Индивидуальные свойства margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

Сокращенная запись:

/* Одинаковый отступ со всех сторон */
margin: 20px;

/* Сверху/снизу: 10px, Слева/справа: 25px */
margin: 10px 25px;

/* Сверху: 15px, Справа: 30px, Снизу: 10px, Слева: 5px */
margin: 15px 30px 10px 5px;

Попробуйте сами

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>