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

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

Эта серия упражнений посвящена значению `inline` свойства `display`. Строчные (inline) элементы являются частью потока текста и располагаются друг за другом в одной строке, занимая только необходимое им пространство по ширине. В отличие от блочных элементов, к строчным нельзя напрямую применить свойства `width`, `height`, `margin-top` и `margin-bottom` (вертикальные отступы игнорируются). Однако горизонтальные отступы (`margin-left`, `margin-right`) и внутренние отступы (`padding`) работают, хотя вертикальные `padding` могут визуально перекрывать соседние строки. Эти задания помогут вам на практике понять и закрепить особенности поведения строчных элементов, научиться управлять их отображением и взаимодействием с окружающим контентом.

Список тем

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

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

CSS

span {
  /* Задайте элементам строчный тип отображения */
  input1: input2;
  background-color: #f0e68c; /* Хаки */
  padding: 5px;
  border: 1px solid #ccc;
}

                     span {
  /* Задайте элементам строчный тип отображения */
  input1: input2;
  background-color: #f0e68c; /* Хаки */
  padding: 5px;
  border: 1px solid #ccc;
}

HTML

<span>Элемент 1</span>
<span>Элемент 2</span>
<span>Элемент 3</span>
<p>Текст после спанов.</p>

Используйте CSS свойство `display` со значением `inline` для селектора `span`.

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

Результат

Сообщения

Выполнить

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

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

Строчные элементы в потоке

Сейчас элементы списка (`<li>`) отображаются как блочные, каждый на новой строке. Измените их тип отображения так, чтобы они выстроились в одну строку, как обычный текст.

CSS

.inline-list input1 {
  /* Сделайте элементы списка строчными */
  input2: input3;
  margin-right: 10px; /* Небольшой отступ справа */
  background-color: #add8e6; /* Светло-голубой */
  padding: 2px 5px;
}

                     .inline-list input1 {
  /* Сделайте элементы списка строчными */
  input2: input3;
  margin-right: 10px; /* Небольшой отступ справа */
  background-color: #add8e6; /* Светло-голубой */
  padding: 2px 5px;
}

HTML

<p>Список покупок:</p>
<ul class="inline-list">
  <li>Молоко</li>
  <li>Хлеб</li>
  <li>Яйца</li>
  <li>Сыр</li>
</ul>

Для тегов `<li>` внутри элемента с классом `inline-list` примените свойство `display` со значением `inline`.

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

Результат

Сообщения

Выполнить

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

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

Игнорирование ширины и высоты

Элементу `<span>` заданы ширина и высота, но они не применяются, так как он строчный по умолчанию. Явно задайте ему `display: inline` и убедитесь, что `width` и `height` по-прежнему игнорируются. Элемент должен занимать только необходимое ему пространство по содержимому.

CSS

.test-span {
  /* Задайте строчный тип */
  input1: input2;
  width: 200px; /* Эта ширина не должна примениться */
  height: 50px; /* Эта высота не должна примениться */
  background-color: #90ee90; /* Светло-зеленый */
  border: 1px solid #555;
}

                     .test-span {
  /* Задайте строчный тип */
  input1: input2;
  width: 200px; /* Эта ширина не должна примениться */
  height: 50px; /* Эта высота не должна примениться */
  background-color: #90ee90; /* Светло-зеленый */
  border: 1px solid #555;
}

HTML

<p>Текст до <span class="test-span">этого спана</span> и текст после.</p>

Примените к элементу с классом `test-span` свойство `display` со значением `inline`. Свойства `width` и `height` уже заданы в CSS, но они не будут влиять на строчный элемент.

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

Результат

Сообщения

Выполнить

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

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

Игнорирование вертикальных отступов

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

CSS

.margin-test span {
  /* Сделайте спаны строчными */
  input1: input2;
  margin-top: 20px; /* Этот отступ не должен работать */
  margin-bottom: 20px; /* Этот отступ не должен работать */
  margin-left: 5px;
  margin-right: 5px;
  background-color: #ffa07a; /* Светло-лососевый */
  border: 1px solid #aaa;
}

                     .margin-test span {
  /* Сделайте спаны строчными */
  input1: input2;
  margin-top: 20px; /* Этот отступ не должен работать */
  margin-bottom: 20px; /* Этот отступ не должен работать */
  margin-left: 5px;
  margin-right: 5px;
  background-color: #ffa07a; /* Светло-лососевый */
  border: 1px solid #aaa;
}

HTML

<div class="margin-test">
  <p>Строка текста над спанами.</p>
  <span>Спан 1</span>
  <span>Спан 2</span>
  <span>Спан 3</span>
  <p>Строка текста под спанами.</p>
</div>

Для всех элементов `span` внутри `div` с классом `margin-test` установите `display: inline`. Заметьте, что `margin-top` и `margin-bottom` не будут отодвигать соседние строки текста.

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

Результат

Сообщения

Выполнить

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

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

Горизонтальные отступы для строчных

В отличие от вертикальных, горизонтальные внешние отступы (`margin-left`, `margin-right`) работают для строчных элементов. Добавьте левый и правый отступы к ссылкам, чтобы отодвинуть их друг от друга.

CSS

.link-spacing a {
  display: inline; /* Ссылки уже строчные, но для ясности */
  /* Добавьте левый отступ */
  input1: 10px;
  /* Добавьте правый отступ */
  input2: 10px;
  background-color: #eee;
  padding: 3px 6px;
}

                     .link-spacing a {
  display: inline; /* Ссылки уже строчные, но для ясности */
  /* Добавьте левый отступ */
  input1: 10px;
  /* Добавьте правый отступ */
  input2: 10px;
  background-color: #eee;
  padding: 3px 6px;
}

HTML

<div class="link-spacing">
  <a href="#">Ссылка 1</a>
  <a href="#">Ссылка 2</a>
  <a href="#">Ссылка 3</a>
</div>

Для тегов `<a>` внутри элемента с классом `link-spacing` используйте свойства `margin-left` и `margin-right`, чтобы добавить горизонтальные отступы. Значения отступов уже заданы (10px).

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

Результат

Сообщения

Выполнить

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

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

Внутренние отступы (Padding)

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

CSS

.padded-span {
  display: inline; /* Убедимся, что элемент строчный */
  /* Добавьте внутренние отступы */
  input1: 15px;
  background-color: #b0c4de; /* Светло-стальной синий */
  border: 1px solid #778899; /* Светло-серый */
  line-height: 1.8; /* Увеличим межстрочный интервал для наглядности */
}

                     .padded-span {
  display: inline; /* Убедимся, что элемент строчный */
  /* Добавьте внутренние отступы */
  input1: 15px;
  background-color: #b0c4de; /* Светло-стальной синий */
  border: 1px solid #778899; /* Светло-серый */
  line-height: 1.8; /* Увеличим межстрочный интервал для наглядности */
}

HTML

<p>Абзац текста с <span class="padded-span">выделенным строчным элементом</span> внутри него. Этот текст находится в той же строке и следует за элементом. Этот текст находится на следующей строке под элементом.</p>

Используйте свойство `padding` для элемента с классом `padded-span`. Задайте значение `15px` (оно уже указано), чтобы добавить отступы со всех сторон. Обратите внимание, как вертикальные отступы влияют на фон, но не на положение текста вокруг.

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

Результат

Сообщения

Выполнить

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

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

Вертикальное выравнивание строчных элементов

Изображение (`<img>`) по умолчанию является строчным элементом. Часто требуется выровнять его по вертикали относительно окружающего текста. Используйте свойство `vertical-align`, чтобы выровнять иконку по середине строки текста.

CSS

.icon-text img {
  /* Выровняйте изображение по вертикали */
  input1: input2;
  width: 16px; /* Размер иконки */
  height: 16px;
}

                     .icon-text img {
  /* Выровняйте изображение по вертикали */
  input1: input2;
  width: 16px; /* Размер иконки */
  height: 16px;
}

HTML

<p class="icon-text">
  Текст с иконкой <img src="https://naytikurs.ru/img/7.png" alt="icon"> внутри строки.
</p>

Примените к элементу `img` внутри `p` с классом `icon-text` свойство `vertical-align` со значением `middle`.

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

Результат

Сообщения

Выполнить

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

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

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

Элементы `<div>` по умолчанию являются блочными и занимают всю доступную ширину, располагаясь друг под другом. Измените их отображение на строчное, чтобы они выстроились в одну линию.

CSS

.block-to-inline div {
  /* Сделайте div'ы строчными */
  input1: input2;
  padding: 10px;
  margin: 5px;
  background-color: #d8bfd8; /* Бледно-лиловый */
  border: 1px dashed #8a2be2; /* Сине-фиолетовый */
}

                     .block-to-inline div {
  /* Сделайте div'ы строчными */
  input1: input2;
  padding: 10px;
  margin: 5px;
  background-color: #d8bfd8; /* Бледно-лиловый */
  border: 1px dashed #8a2be2; /* Сине-фиолетовый */
}

HTML

<div class="block-to-inline">
  <div>Блок 1</div>
  <div>Блок 2</div>
  <div>Блок 3</div>
</div>

Для всех элементов `div` внутри контейнера с классом `block-to-inline` примените свойство `display` со значением `inline`.

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

Результат

Сообщения

Выполнить

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

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