Урок 138 із 239
58%
Висота блочного елемента в CSS
Вивчаємо, як формується висота блочного елемента, якщо властивість height не задана.
Висота блочного елемента в CSS
Якщо у блочного елемента не вказати висоту за допомогою властивості height, вона буде автоматично визначатися його вмістом.
Браузер розраховує висоту блоку залежно від кількості тексту, вкладених елементів та інших властивостей.
<div>text</div>div {
width: 100px;
border: 1px solid red;
} ❗ Важливо:
Для блочних елементів height не є обов'язковою властивістю. Якщо її не задати, висота визначається вмістом.
- width — задає ширину елемента.
- height — задає фіксовану висоту елемента.
- Без height висота залежить від вмісту.
- Більше тексту — більша висота блоку.
📌 Завдання:
- №1. Створіть блок div із текстом.
- №2. Додайте width: 100px та border.
- №3. Додайте більше тексту та подивіться, як змінюється висота блоку.
💡 Показати підказку
Спробуйте видалити height у блоків і подивіться, як браузер сам визначає їхню висоту.
✅ Показати відповідь
div {
width: 100px;
border: 1px solid red;
}