Блочные элементы (display: block): Тренажер CSS

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

В этой серии упражнений вы попрактикуетесь в использовании значения `block` для свойства `display`. Блочные элементы занимают всю доступную ширину родительского контейнера, начинаются с новой строки и позволяют устанавливать вертикальные отступы (`margin-top`, `margin-bottom`) и размеры (`width`, `height`). Вы будете изменять отображение элементов, чтобы они вели себя как блоки, и наблюдать, как это влияет на их расположение и взаимодействие с другими элементами на странице. Задания построены от простого к сложному, чтобы помочь вам постепенно освоить эту важную концепцию CSS.

Список тем

Превращение строчного элемента в блочный

В HTML есть элемент `<span>`, который по умолчанию является строчным. Ваша задача — изменить его CSS так, чтобы он вел себя как блочный элемент, занимая всю доступную ширину и начинаясь с новой строки. Обратите внимание, как изменится его отображение после применения стилей.

CSS

span {
  background-color: lightblue;
  padding: 10px;
  /* Измените отображение элемента на блочное */
  input1: input2;
}

                     span {
  background-color: lightblue;
  padding: 10px;
  /* Измените отображение элемента на блочное */
  input1: input2;
}

HTML

<div>Это текст до span. <span>Это содержимое span.</span> Это текст после span.</div>

Чтобы элемент вел себя как блочный, используйте свойство `display` со значением `block`. Примените это свойство к селектору `span`.

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

Результат

Сообщения

Выполнить

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

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

Подтверждение блочного поведения Div

Элементы `<div>` по умолчанию являются блочными. В этом задании два `<div>` расположены друг под другом. Добавьте CSS правило, которое явно указывает `display: block` для всех `<div>`, чтобы убедиться, что вы понимаете их стандартное поведение. Хотя это правило избыточно для `div`, оно помогает закрепить знание.

CSS

div {
  background-color: lightcoral;
  padding: 15px;
  margin-bottom: 10px;
  /* Явно укажите блочное отображение */
  input1: input2;
}

                     div {
  background-color: lightcoral;
  padding: 15px;
  margin-bottom: 10px;
  /* Явно укажите блочное отображение */
  input1: input2;
}

HTML

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

Используйте селектор `div`, чтобы применить стили ко всем элементам `<div>`. Добавьте свойство `display` со значением `block`.

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

Результат

Сообщения

Выполнить

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

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

Блочные элементы и новая строка

В HTML есть несколько элементов `<span>`, которые отображаются в одну строку. Сделайте так, чтобы каждый `<span>` начинался с новой строки, как это делают блочные элементы. Добавьте соответствующее CSS свойство и значение.

CSS

span {
  background-color: lightgreen;
  padding: 5px;
  margin-bottom: 5px; /* Добавим отступ снизу для наглядности */
  /* Сделайте так, чтобы каждый span был на новой строке */
  input1: input2;
}

                     span {
  background-color: lightgreen;
  padding: 5px;
  margin-bottom: 5px; /* Добавим отступ снизу для наглядности */
  /* Сделайте так, чтобы каждый span был на новой строке */
  input1: input2;
}

HTML

<p>Несколько span подряд: <span>Один</span> <span>Два</span> <span>Три</span></p>

Чтобы каждый `<span>` начинался с новой строки, его нужно сделать блочным элементом. Используйте свойство `display` со значением `block` для селектора `span`.

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

Результат

Сообщения

Выполнить

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

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

Применение ширины к блочному элементу

Строчные элементы по умолчанию игнорируют свойства `width` и `height`. Превратите элемент `<span>` в блочный и задайте ему фиксированную ширину (например, 200px). Обратите внимание, что после превращения в блок, свойство `width` начнет работать.

CSS

span {
  background-color: gold;
  padding: 10px;
  /* 1. Сделайте элемент блочным */
  input1: input2;
  /* 2. Ширина будет применена только к блочному элементу */
  width: 200px;
}

                     span {
  background-color: gold;
  padding: 10px;
  /* 1. Сделайте элемент блочным */
  input1: input2;
  /* 2. Ширина будет применена только к блочному элементу */
  width: 200px;
}

HTML

<span>Этот span должен стать блочным и получить ширину 200px.</span>

Сначала сделайте `<span>` блочным с помощью `display: block`. Затем добавьте свойство `width` со значением `200px` (значение ширины уже указано в CSS, вам нужно добавить только свойство и значение для display).

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

Результат

Сообщения

Выполнить

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

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

Вертикальные отступы для блочных элементов

Строчные элементы (`<span>`) игнорируют вертикальные отступы (`margin-top`, `margin-bottom`). Превратите два элемента `<span>` в блочные, чтобы заданные для них вертикальные отступы начали работать и создали пространство между ними.

CSS

.block-span {
  background-color: plum;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  /* Сделайте эти span блочными */
  input1: input2;
}

                     .block-span {
  background-color: plum;
  padding: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  /* Сделайте эти span блочными */
  input1: input2;
}

HTML

<span class="block-span">Первый span</span>
<span class="block-span">Второй span</span>
<p>Текст после span.</p>

Используйте свойство `display` со значением `block` для селектора `.block-span`, чтобы сделать элементы блочными. Вертикальные отступы (`margin-top` и `margin-bottom`) уже заданы в CSS.

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

Результат

Сообщения

Выполнить

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

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

Центрирование блочного элемента

Чтобы отцентрировать блочный элемент по горизонтали, ему нужно задать фиксированную ширину и установить автоматические левый и правый отступы (`margin-left: auto`, `margin-right: auto`). В этом задании есть `div` с классом `centered`. Сделайте его блочным (хотя `div` и так блочный, это для практики) и добавьте правила для центрирования.

CSS

.centered {
  background-color: lightskyblue;
  padding: 20px;
  width: 250px; /* Ширина обязательна для центрирования */
  /* 1. Убедитесь, что элемент блочный */
  display: input1;
  /* 2. Установите автоматические боковые отступы */
  margin-left: input2;
  margin-right: input3;
}

                     .centered {
  background-color: lightskyblue;
  padding: 20px;
  width: 250px; /* Ширина обязательна для центрирования */
  /* 1. Убедитесь, что элемент блочный */
  display: input1;
  /* 2. Установите автоматические боковые отступы */
  margin-left: input2;
  margin-right: input3;
}

HTML

<div class="centered">Этот блок должен быть по центру.</div>

Убедитесь, что у элемента установлено `display: block` (или он блочный по умолчанию). Задайте ему свойство `width`. Для центрирования используйте `margin-left: auto;` и `margin-right: auto;`. Как вариант, можно использовать сокращенное свойство `margin` со значениями `0 auto` (0 для верхнего/нижнего отступа, auto для левого/правого).

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

Результат

Сообщения

Выполнить

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

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

Альтернативное центрирование блочного элемента

Это вариация предыдущего задания на центрирование. Вместо `margin-left` и `margin-right` по отдельности, используйте сокращенное свойство `margin` для центрирования блочного элемента `div` с классом `centered-alt`.

CSS

.centered-alt {
  background-color: teal;
  color: white;
  padding: 15px;
  width: 80%; /* Ширина задана в процентах */
  display: block;
  /* Используйте сокращенное свойство margin для центрирования */
  margin: input1;
}

                     .centered-alt {
  background-color: teal;
  color: white;
  padding: 15px;
  width: 80%; /* Ширина задана в процентах */
  display: block;
  /* Используйте сокращенное свойство margin для центрирования */
  margin: input1;
}

HTML

<div class="centered-alt">Этот блок тоже должен быть по центру.</div>

У элемента уже задана ширина и `display: block`. Используйте свойство `margin` со значением `0 auto`, чтобы установить верхний/нижний отступы в 0, а левый/правый — в `auto`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация элементов списка как блоков

Элементы списка `<li>` по умолчанию имеют маркеры и ведут себя как блочные элементы (`display: list-item`, что похоже на `block`). Сделайте так, чтобы элементы `<li>` внутри списка с классом `styled-list` отображались как обычные блоки без маркеров, но с фоном и отступами.

CSS

.styled-list li {
  background-color: #eee;
  padding: 10px;
  margin-bottom: 5px;
  /* Установите display: block */
  input1: input2;
}

                     .styled-list li {
  background-color: #eee;
  padding: 10px;
  margin-bottom: 5px;
  /* Установите display: block */
  input1: input2;
}

HTML

<ul class="styled-list">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

Используйте селектор `.styled-list li` для стилизации элементов списка. Установите `display: block;`, чтобы переопределить стандартное `display: list-item` и убрать маркеры. Свойства `background-color` и `margin` уже добавлены.

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

Результат

Сообщения

Выполнить

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

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

Блочная ссылка с изображением

Ссылки `<a>` являются строчными элементами. Если внутри ссылки находится изображение, и вы хотите добавить отступы вокруг всей конструкции или задать ей ширину, нужно сделать ссылку блочным элементом. Превратите ссылку с классом `image-link` в блок.

CSS

a.image-link {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
  /* Сделайте ссылку блочной */
  input1: input2;
  /* Опционально: можно задать ширину, чтобы ограничить блок */
  /* width: 150px; */
}

a.image-link img {
  /* Чтобы изображение не выходило за рамки блока-ссылки */
  max-width: 100%;
  height: auto;
  display: block; /* Убираем лишний отступ под картинкой */
}

                     a.image-link {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
  /* Сделайте ссылку блочной */
  input1: input2;
  /* Опционально: можно задать ширину, чтобы ограничить блок */
  /* width: 150px; */
}

a.image-link img {
  /* Чтобы изображение не выходило за рамки блока-ссылки */
  max-width: 100%;
  height: auto;
  display: block; /* Убираем лишний отступ под картинкой */
}

HTML

<a href="#" class="image-link">
  <img src="https://naytikurs.ru/img/1.png" alt="Пример изображения" width="100">
</a>
<a href="#" class="image-link">
  <img src="https://naytikurs.ru/img/2.png" alt="Пример изображения 2" width="100">
</a>

Примените `display: block;` к селектору `a.image-link`. Это позволит ссылке занимать всю ширину (если не задана `width`) и применять вертикальные отступы.

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

Результат

Сообщения

Выполнить

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

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