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


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

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

Ця властивість не включає в себе padding, border та margin, Вона лише визначає висоту всередині padding, border та margin. Якщо вміст блоку перевищує зазначену висоту, то висота елемента залишиться незмінною, а його вміст може вийти за межі блоку. Щоб це не відбувалося, додайте властивість overflow: auto до стилю елемента.

Під-час використання ключового слова auto, висота блоку обчислюється автоматично, беручи за основу вміст цього блоку. Це означає, що значення, які базуються на відсотках (наприклад, 25%), висота вираховується в залежності від дійсної висоти вмісту елемента. Якщо для висоти контейнера встановлено процентне значення, то процентна висота дочірніх елементів, як і раніше, базується на області вмісту контейнера.

Якщо висота блоку не вказана явно, а елемент не позиціонується абсолютно, значення його висоти обчислюється автоматично (він буде таким же, як і його вміст нього, або дорівнювати нулю, якщо вмісту немає). Якщо вміст контейнера вимагає більше вертикального простору, ніж доступно, поведінка елементів визначається властивістю overflow.

В якості значень приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При використанні процентної записи висота обчислюється залежно від значення висоти у батьківського елемента. Якщо батько явно не вказаний, то в його якості виступає вікно браузера. Якщо висота у батька явно не визначена, то застосовується значення auto, він встановлює висоту виходячи з вмісту елемента.

Нотатка:

Властивості min-height та max-height перевизначають властивість height.

Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості box-sizing). Це не стосується до значень у одиницях довжини або процентах.

Також зверніть увагу на властивості min-height і max-height.

Нотатка:

Якщо для елемента властивість box-sizing задано як border-box, то height визначає висоту блоку.

Синтаксис

height: auto|length|initial|inherit;

Властивість height може отримувати 5 значень:

auto

Браузер самостійно обчислює висоту, на основі його вмісту. Це без задання

length

Визначає висоту в px, cm, etc

%

Визначає висоту у відсотках від батьківського елементу

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.height="500px"

Переглядачі

Переглядач
height

1.0

8.0

1.0

1.0

7.0

Переглядач
height

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація роботи властивості

Демонстрація роботи властивості

Встановлює висоту абзацу

p.ex {


    height: 100px;


    width: 100px;


}

Додаткові посилання