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

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

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

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

Блочним елементам у CSS можна задавати власну ширину та висоту за допомогою властивостей width і height.

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

<div>text</div>
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
  • width — задає ширину елемента.
  • height — задає висоту елемента.
  • border — додає границю навколо елемента.
❗ Важливо:

Ширина та висота застосовуються до блочних елементів. Для рядкових елементів ці властивості зазвичай не працюють так само.

📌 Завдання:
  1. №1. Створіть блок div.
  2. №2. Задайте йому width: 200px та height: 100px.
  3. №3. Додайте границю та змініть її товщину.
💡 Показати підказку

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

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