Внешние отступы (margin): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

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

Список тем

Базовый отступ

Добавьте внешний отступ со всех сторон для элемента `div` с классом `box`. Расстояние между `div` и краями окна браузера (или родительского элемента, если он есть) должно быть заметным.

CSS

.box {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  input1: 20px;
}

                     .box {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  input1: 20px;
}

HTML

<div class="box"></div>

Используйте свойство `margin` с одним значением, чтобы задать одинаковый отступ со всех сторон.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Разные отступы

Задайте разные внешние отступы для элемента `div` с классом `box`: сверху - 30px, справа - 15px, снизу - 40px, слева - 25px.

CSS

.box {
  background-color: lightgreen;
  width: 150px;
  height: 100px;
  input1: 30px 15px 40px 25px;
}

                     .box {
  background-color: lightgreen;
  width: 150px;
  height: 100px;
  input1: 30px 15px 40px 25px;
}

HTML

<div class="box"></div>

Используйте свойство `margin` с четырьмя значениями, указанными в порядке: верхний, правый, нижний, левый (по часовой стрелке).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сокращенная запись (2 значения)

Установите верхний и нижний внешние отступы для элемента `div` с классом `box` равными 25px, а левый и правый - 10px. Используйте сокращенную запись свойства `margin`.

CSS

.box {
  background-color: lightcoral;
  width: 100px;
  height: 150px;
  input1: 25px input2;
}

                     .box {
  background-color: lightcoral;
  width: 100px;
  height: 150px;
  input1: 25px input2;
}

HTML

<div class="box"></div>

Используйте свойство `margin` с двумя значениями: первое значение задает верхний и нижний отступы, а второе - левый и правый.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сокращенная запись (3 значения)

Для элемента `div` с классом `container` установите: верхний отступ 10px, левый и правый отступы 20px, нижний отступ 30px. Используйте сокращенную запись.

CSS

input1 {
  background-color: lightyellow;
  width: 200px;
  height: 100px;
  margin: 10px input2 30px;
}

                     input1 {
  background-color: lightyellow;
  width: 200px;
  height: 100px;
  margin: 10px input2 30px;
}

HTML

<div class="container"></div>

При использовании трех значений, первое значение задает верхний отступ, второе - левый и правый, а третье - нижний.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Обнуление отступов

Обнулите все внешние отступы у элемента `p`.

CSS

p {
  background-color: lavender;
  input1: 0;
}

                     p {
  background-color: lavender;
  input1: 0;
}

HTML

<p>Это параграф текста.</p>

Используйте свойство `margin` со значением `0`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Отрицательный отступ

Сдвиньте элемент `div` с классом `overlap` вверх на 20px, чтобы он частично перекрывал предыдущий элемент.

CSS

.overlap {
  background-color: lightcyan;
  width: 100px;
  height: 50px;
  input1: -20px;
}

                     .overlap {
  background-color: lightcyan;
  width: 100px;
  height: 50px;
  input1: -20px;
}

HTML

<div style="height: 50px; background-color: lightgray;"></div>
<div class="overlap"></div>

Используйте свойство `margin-top` с отрицательным значением.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Автоматические отступы

Отцентрируйте элемент `div` с классом `centered` по горизонтали, используя автоматические отступы.

CSS

.centered {
  background-color: lightpink;
  width: 150px;
  input1: auto;
  input2: auto;
 height: 30px;}

                     .centered {
  background-color: lightpink;
  width: 150px;
  input1: auto;
  input2: auto;
 height: 30px;}

HTML

<div class="centered"></div>

Установите `margin-left` и `margin-right` в значение `auto`. Также необходимо задать ширину элемента (width), иначе он займет всю доступную ширину и центрирования не будет видно.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Отступы у строчных элементов

Добавьте внешние отступы слева и справа по 30px для элемента `span` с классом `inline-margin`. Обратите внимание, что `margin-top` и `margin-bottom` не влияют на строчные элементы (по умолчанию).

CSS

.inline-margin {
  background-color: thistle;
  input1: 30px;
  input2: 30px;
}

                     .inline-margin {
  background-color: thistle;
  input1: 30px;
  input2: 30px;
}

HTML

Это текст с <span class="inline-margin">выделенным</span> словом.

Используйте свойства `margin-left` и `margin-right`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Margin и блочные элементы

Добавьте отступ сверху 20px к картинке, чтобы создать пространство между картинкой и текстом над ней.

CSS

img {
  display: block; /* Картинки по умолчанию строчно-блочные */
  input1: 20px;
}

                     img {
  display: block; /* Картинки по умолчанию строчно-блочные */
  input1: 20px;
}

HTML

<p>Текст над картинкой.</p>
<img src="https://naytikurs.ru/img/1.png" alt="Пример">

Используйте свойство `margin-top` для элемента `img`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинированные отступы

Создайте два блока (`div`) с классом `block`. Для первого блока установите внешний отступ снизу 30px. Для второго блока установите внешний отступ сверху 15px. Обратите внимание на схлопывание отступов.

CSS

.block:first-child {
  background-color: palegoldenrod;
  height: 50px;
  input1: 30px;
}

.block:last-child {
  background-color: paleturquoise;
  height: 50px;
  input2: 15px;
}

                     .block:first-child {
  background-color: palegoldenrod;
  height: 50px;
  input1: 30px;
}

.block:last-child {
  background-color: paleturquoise;
  height: 50px;
  input2: 15px;
}

HTML

<div class="block">Первый блок</div>
<div class="block">Второй блок</div>

Используйте свойство `margin-bottom` для первого блока и `margin-top` для второго. В результате между блоками будет расстояние, равное *большему* из двух отступов (в данном случае 30px, а не 45px).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку