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

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

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

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

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

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

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

Для inline-block елементів можна задавати width і height. Якщо height не задано, висота формується вмістом.

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

Якщо у елемента немає заданої висоти, браузер розраховує її за вмістом.

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