Урок 149 із 239
62%
← Назад

Кілька рядково-блочних елементів поруч у CSS

Вивчаємо, як розташувати кілька елементів в один ряд за допомогою display: inline-block.

Кілька рядково-блочних елементів поруч у CSS

Рядково-блочні елементи поєднують властивості рядкових і блочних елементів.

Вони можуть розташовуватися в одному рядку, як рядкові елементи, але при цьому для них працюють width і height, як у блочних.

<span>text</span>
<span>text</span>
<span>text</span>
span {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid red;
  display: inline-block;
}
  • display: block → елементи розташовуються один під одним.
  • display: inline → елементи в рядку, але без width і height.
  • display: inline-block → елементи в рядку з можливістю задавати розміри.
❗ Важливо:

display: inline-block часто використовують для створення карток, кнопок, пунктів меню та інших елементів, які повинні бути в рядку і мати розміри.

📌 Завдання:
  1. №1. Дані блоки div:
  2. <div class="elem">text</div>
  3. <div class="elem">text</div>
  4. <div class="elem">text</div>
  5. Перетворіть їх у рядково-блочні елементи, щоб вони розташувалися в один ряд.
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
💡 Показати підказку

Додайте властивість display: inline-block до блочних елементів.

✅ Показати відповідь
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}