Урок 137 із 239
57%
← Назад

Ширина блочного елемента в CSS

Вивчаємо поведінку блочних елементів без заданої ширини та як CSS автоматично розтягує їх на всю доступну ширину.

Ширина блочного елемента в CSS

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

Це стандартна поведінка блокових елементів у CSS.

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

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

  • div — приклад блочного елемента.
  • width — задає власну ширину елемента.
  • Без width блок займає всю доступну ширину.
  • height не впливає на ширину елемента.
📌 Завдання:
  1. №1. Створіть блок div без властивості width.
  2. №2. Додайте йому border і height.
  3. №3. Задайте width: 300px та порівняйте результат.
💡 Показати підказку

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

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