css властивість height
Властивість height задає висоту елемента.
Ця властивість не включає в себе padding, border та margin, Вона лише визначає висоту всередині padding, border та margin. Якщо вміст блоку перевищує зазначену висоту, то висота елемента залишиться незмінною, а його вміст може вийти за межі блоку. Щоб це не відбувалося, додайте властивість overflow: auto до стилю елемента.
Під-час використання ключового слова auto, висота блоку обчислюється автоматично, беручи за основу вміст цього блоку. Це означає, що значення, які базуються на відсотках (наприклад, 25%), висота вираховується в залежності від дійсної висоти вмісту елемента. Якщо для висоти контейнера встановлено процентне значення, то процентна висота дочірніх елементів, як і раніше, базується на області вмісту контейнера.
Якщо висота блоку не вказана явно, а елемент не позиціонується абсолютно, значення його висоти обчислюється автоматично (він буде таким же, як і його вміст нього, або дорівнювати нулю, якщо вмісту немає). Якщо вміст контейнера вимагає більше вертикального простору, ніж доступно, поведінка елементів визначається властивістю overflow.
В якості значень приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При використанні процентної записи висота обчислюється залежно від значення висоти у батьківського елемента. Якщо батько явно не вказаний, то в його якості виступає вікно браузера. Якщо висота у батька явно не визначена, то застосовується значення auto, він встановлює висоту виходячи з вмісту елемента.
| Нотатка: | Властивості Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості Також зверніть увагу на властивості min-height і max-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;
}