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

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

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

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

Якщо у рядково-блочного елемента не вказати властивість width, його ширина буде визначатися вмістом.

Така поведінка схожа на звичайні рядкові елементи: блок займає тільки необхідний простір для тексту.

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

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

  • inline-block дозволяє задавати width і height.
  • Без width ширина залежить від вмісту.
  • Без height висота залежить від вмісту.
  • Елемент може розташовуватися в одному рядку з іншими inline-block елементами.
📌 Завдання:
  1. №1. Створіть елемент span з display: inline-block.
  2. №2. Задайте йому height, але не задавайте width.
  3. №3. Змініть текст усередині та подивіться, як змінюється ширина.
  4. №4. Додайте width і порівняйте результат.
💡 Показати підказку

Спробуйте змінити кількість тексту всередині елемента та спостерігайте за зміною ширини.

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