height

CSS-властивість height використовується для визначення висоти елемента. Вона дозволяє задавати точну висоту для блоків, зображень, контейнерів та інших елементів на веб-сторінці. Це важливий інструмент для розробки макетів, де потрібно встановити висоту елемента для досягнення бажаного вигляду.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ компаній України, Європи та США

Синтаксис

height: <length> | <percentage> | auto | min-content | max-content | fit-content;

Значення

  • <length> — фіксована висота в одиницях виміру (px, em, rem, vh, vw тощо), наприклад: 300px.
  • <percentage> — висота відносно висоти батьківського елемента, наприклад: 50%.
  • auto — браузер сам визначає висоту елемента в залежності від його вмісту та контексту макету (значення за замовчуванням для блочних елементів).
  • min-content — мінімальна висота, необхідна для розміщення вмісту без обрізання. Наприклад, текст або блоки всередині елемента будуть переноситися чи скорочуватися до мінімально можливого розміру.
  • max-content — висота, яка потрібна для розміщення всього вмісту без переносу або обрізання, тобто максимально можлива висота, яку займе контент.
  • fit-content — елемент підлаштовується під розмір вмісту, але не перевищує доступний простір контейнера.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • Властивість height застосовується до блокових елементів та елементів з display: block, inline-block, flex чи grid. Для інлайн-елементів висота зазвичай не задається, оскільки її визначає вміст елемента.
  • Для елементів з box-sizing: border-box висота включає padding і border, що дозволяє точніше контролювати розміри елемента.
  • Якщо висота елемента не задана, то для блокових елементів зазвичай використовується auto. Це означає, що елемент автоматично масштабується за висотою залежно від його вмісту.
  • Властивість height особливо корисна в адаптивному дизайні, коли потрібно забезпечити відповідність висоти елементів до розмірів екранів або батьківських контейнерів.