Ширина і висота рядково-блочного елемента в CSS

Вивчаємо особливості елементів із display: inline-block та можливість задавати їм ширину і висоту.

Ширина і висота рядково-блочного елемента в CSS

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

На відміну від звичайних рядкових елементів, йому можна задавати ширину та висоту.

При цьому такі елементи можуть розташовуватися в одному рядку, як рядкові елементи.

<span>text</span>

span {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}

❗ Важливо:

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

inline — елемент у рядку, але width і height не працюють.
block — елемент починається з нового рядка, width і height працюють.
inline-block — елемент у рядку, width і height працюють.

📌 Завдання:

№1. Створіть кілька елементів span.
№2. Додайте їм display: inline-block.
№3. Встановіть width і height.
№4. Порівняйте результат із display: inline.

💡 Показати підказку

Якщо потрібно зробити елемент у рядку, але керувати його розмірами — використовуйте inline-block.

✅ Показати відповідь

span {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  display: inline-block;
}