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

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

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

Список тем

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

У вас есть два элемента `<span>`. По умолчанию они являются строчными, и к ним нельзя применить `width`, `height` или вертикальные `margin`/`padding`. Ваша задача — изменить их отображение так, чтобы они оставались в одной строке, но чтобы к ним можно было применить указанные размеры и отступы.

CSS

span {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: #add8e6; /* lightblue */
  border: 1px solid #00008b; /* darkblue */
}

                     span {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: #add8e6; /* lightblue */
  border: 1px solid #00008b; /* darkblue */
}

HTML

<span>Элемент 1</span>
<span>Элемент 2</span>

Используйте свойство `display` со значением `inline-block` для селектора `span`. Это позволит элементам `span` принимать свойства `width`, `height`, `margin-top`, `margin-bottom`, оставаясь при этом в строке.

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

Результат

Сообщения

Выполнить

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

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

Горизонтальное меню навигации

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

CSS

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  margin-right: 15px; /* Добавляем отступ справа */
  background-color: #f0e68c; /* khaki */
  padding: 10px;
  border: 1px solid #bdb76b; /* darkkhaki */
}

                     nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  margin-right: 15px; /* Добавляем отступ справа */
  background-color: #f0e68c; /* khaki */
  padding: 10px;
  border: 1px solid #bdb76b; /* darkkhaki */
}

HTML

<nav>
  <ul>
    <li>Главная</li>
    <li>О нас</li>
    <li>Контакты</li>
  </ul>
</nav>

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

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

Результат

Сообщения

Выполнить

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

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

Добавление отступов между строчно-блочными элементами

У вас есть несколько блоков `div` с классом `box`. Сделайте так, чтобы они располагались в одну строку и между ними был горизонтальный отступ справа в 10 пикселей. Используйте свойство для управления типом отображения и свойство для внешнего отступа.

CSS

.box {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: inline-block;
  input2: 10px;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 60px;
  height: 60px;
  background-color: #90ee90; /* lightgreen */
  border: 1px solid #2e8b57; /* seagreen */
}

                     .box {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: inline-block;
  input2: 10px;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 60px;
  height: 60px;
  background-color: #90ee90; /* lightgreen */
  border: 1px solid #2e8b57; /* seagreen */
}

HTML

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

Сначала установите для `.box` свойство `display` в значение `inline-block`. Затем добавьте свойство `margin-right` со значением `10px`, чтобы создать отступ справа от каждого блока.

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

Результат

Сообщения

Выполнить

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

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

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

Изображение и текст рядом с ним сейчас выровнены по базовой линии. Ваша задача — сделать так, чтобы и изображение, и текст стали строчно-блочными элементами и были выровнены по середине относительно друг друга.

CSS

.icon,
.text- рядом {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  vertical-align: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */
}

.icon {
  width: 24px;
  height: 24px;
}

.text- рядом {
  margin-left: 5px;
}

                     .icon,
.text- рядом {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  vertical-align: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */
}

.icon {
  width: 24px;
  height: 24px;
}

.text- рядом {
  margin-left: 5px;
}

HTML

<div>
  <img src="https://naytikurs.ru/img/1.png" alt="icon" class="icon">
  <span class="text-рядом">Текст рядом с иконкой</span>
</div>

Примените `display: inline-block` к обоим элементам (`img` и `span`). Затем используйте свойство `vertical-align` со значением `middle` для обоих элементов (или только для одного, если второй уже `inline-block` и нужно выровнять относительно него), чтобы выровнять их по вертикали.

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

Результат

Сообщения

Выполнить

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

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

Создание сетки карточек

Есть несколько карточек (`div` с классом `card`). Расположите их в виде сетки (по несколько штук в ряду), используя `display: inline-block`. Карточки должны иметь фиксированную ширину и отступы.

CSS

.card {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: inline-block;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 100px;
  height: 120px;
  margin: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  vertical-align: top; /* Выравниваем карточки по верху */
}

.card img {
  max-width: 100%;
  height: auto;
  display: block; /* Убираем лишний отступ под картинкой */
  margin-bottom: 5px;
}

                     .card {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: inline-block;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 100px;
  height: 120px;
  margin: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  vertical-align: top; /* Выравниваем карточки по верху */
}

.card img {
  max-width: 100%;
  height: auto;
  display: block; /* Убираем лишний отступ под картинкой */
  margin-bottom: 5px;
}

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/4.png" alt="card image">
  Карточка 1
</div>
<div class="card">
  <img src="https://naytikurs.ru/img/5.png" alt="card image">
  Карточка 2
</div>
<div class="card">
  <img src="https://naytikurs.ru/img/6.png" alt="card image">
  Карточка 3
</div>
<div class="card">
  <img src="https://naytikurs.ru/img/7.png" alt="card image">
  Карточка 4
</div>

Для селектора `.card` установите свойство `display` в значение `inline-block`. Также убедитесь, что у карточек заданы `width` и `margin`, чтобы они корректно отображались в строке и имели промежутки.

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

Результат

Сообщения

Выполнить

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

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

Стилизация кнопок с помощью inline-block

Превратите ссылки (`<a>`) в стилизованные кнопки, которые располагаются в одну строку. Кнопки должны иметь внутренние отступы и рамку.

CSS

a.button {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  input2: 10px 15px;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  margin: 5px;
  border: 1px solid #4682b4; /* steelblue */
  background-color: #b0c4de; /* lightsteelblue */
  text-decoration: none;
  color: #000;
  border-radius: 4px;
}

                     a.button {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  input2: 10px 15px;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  margin: 5px;
  border: 1px solid #4682b4; /* steelblue */
  background-color: #b0c4de; /* lightsteelblue */
  text-decoration: none;
  color: #000;
  border-radius: 4px;
}

HTML

<a href="#" class="button">Кнопка 1</a>
<a href="#" class="button">Кнопка 2</a>
<a href="#" class="button">Кнопка 3</a>

Используйте `display: inline-block` для селектора `a.button`, чтобы к ссылкам можно было применить `padding` и `border`, и они оставались в строке. Добавьте свойство `padding` для создания внутренних отступов.

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

Результат

Сообщения

Выполнить

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

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

Центрирование строчно-блочных элементов

У вас есть контейнер `.container` и несколько дочерних элементов `.item`. Сделайте дочерние элементы строчно-блочными и отцентрируйте их по горизонтали внутри контейнера.

CSS

.container {
  border: 1px dashed #ccc;
  padding: 10px;
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: center;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */
}

.item {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #ffb6c1; /* lightpink */
  border: 1px solid #ff69b4; /* hotpink */
}

                     .container {
  border: 1px dashed #ccc;
  padding: 10px;
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  input1: center;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */
}

.item {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: #ffb6c1; /* lightpink */
  border: 1px solid #ff69b4; /* hotpink */
}

HTML

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

Для центрирования строчно-блочных элементов (`display: inline-block`) используется свойство `text-align: center`, примененное к их родительскому контейнеру. Установите `.item` как `inline-block`, а для `.container` задайте `text-align: center`.

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

Результат

Сообщения

Выполнить

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

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

Галерея изображений в ряд

Создайте простую галерею, где изображения располагаются горизонтально в один ряд. Используйте `inline-block` для изображений и выровняйте их по верхнему краю.

CSS

.gallery img {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  vertical-align: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 80px; /* Ширина изображений */
  height: auto;
  margin: 5px;
  border: 2px solid #eee;
}

                     .gallery img {
  /* ↓↓↓ Допишите код здесь ↓↓↓ */
  display: input1;
  vertical-align: input2;
  /* ↑↑↑ Допишите код здесь ↑↑↑ */

  width: 80px; /* Ширина изображений */
  height: auto;
  margin: 5px;
  border: 2px solid #eee;
}

HTML

<div class="gallery">
  <img src="https://naytikurs.ru/img/8.png" alt="Image 1">
  <img src="https://naytikurs.ru/img/9.png" alt="Image 2">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 3">
  <img src="https://naytikurs.ru/img/2.png" alt="Image 4">
</div>

Примените к изображениям (`img` внутри `.gallery`) свойство `display` со значением `inline-block`. Чтобы они выравнивались по верху, добавьте свойство `vertical-align` со значением `top`.

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

Результат

Сообщения

Выполнить

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

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