Урок 141 із 239
59%
← Назад

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

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

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

Рядкові елементи мають розмір, який визначається їхнім вмістом. Їхня ширина і висота залежать від тексту або інших вкладених елементів.

Якщо задати рядковому елементу властивості width і height, вони не будуть працювати.

<span>text</span>
span {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
❗ Важливо:

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

  • span — приклад рядкового елемента.
  • Розмір рядкового елемента залежить від його вмісту.
  • width не змінює ширину рядкового елемента.
  • height не змінює висоту рядкового елемента.
span {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
📌 Завдання:
  1. №1. Створіть елемент span із текстом.
  2. №2. Додайте йому width та height.
  3. №3. Перевірте, чому розміри не змінюються.
  4. №4. Додайте display: inline-block і порівняйте результат.
💡 Показати підказку

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

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