Урок 28 із 239
12%
← Назад

Ширина і висота елементів у CSS

Навчіться керувати розмірами HTML-елементів за допомогою властивостей width та height.

Ширина і висота елементів у CSS

CSS дозволяє керувати розмірами HTML-елементів. Для цього використовуються властивості width (ширина) та height (висота).

Найчастіше розміри задають у пікселях. Пікселі позначаються скороченням px після числа.

element {
  width: 200px;
  height: 100px;
}

Властивість width

Властивість width задає ширину елемента. Наприклад, можна зробити абзаци шириною 300px.

p {
  width: 300px;
}

Властивість height

Властивість height задає висоту елемента.

td {
  width: 200px;
  height: 100px;
}
ВластивістьПризначення
widthВстановлює ширину елемента
heightВстановлює висоту елемента
pxОдиниця вимірювання пікселів
  • width відповідає за ширину елемента.
  • height відповідає за висоту елемента.
  • px використовується для задання розміру в пікселях.
  • Розміри можна задавати для більшості HTML-елементів.
❗ Важливо:

Не завжди потрібно задавати висоту елементам. Часто браузер автоматично розраховує її залежно від вмісту.

📌 Завдання:
  1. Створіть декілька абзаців із довгим текстом.
  2. За допомогою CSS встановіть усім абзацам ширину 300px.
  3. Створіть таблицю з декількома рядками.
  4. Встановіть коміркам таблиці ширину 400px та висоту 300px.
💡 Показати підказку

Для зміни розміру використовуйте властивості width і height.

✅ Показати відповідь
Приклад:

p {
  width: 300px;
}


td {
  width: 400px;
  height: 300px;
}