Урок 139 із 239
58%
← Назад

Висота блочного елемента без вмісту в CSS

Вивчаємо, як поводиться блочний елемент без вмісту та чому його висота стає нульовою.

Висота блочного елемента без вмісту в CSS

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

У результаті границя елемента згорнеться, і ми побачимо тільки тонку лінію.

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

Висота блочного елемента без height формується з його вмісту. Якщо вмісту немає — висота дорівнює нулю.

  • Порожній блок без height має висоту 0px.
  • Границя все одно буде відображатися.
  • Додавання тексту або height збільшить висоту елемента.
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
📌 Завдання:
  1. №1. Створіть порожній div.
  2. №2. Додайте йому width та border.
  3. №3. Додайте height і порівняйте результат.
  4. №4. Спробуйте замість height використати padding.
💡 Показати підказку

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

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