height
Висота елемента не включає padding, border або margin!
Якщо CSS властивість height: auto; автоматично відрегулює свою висоту, щоб його вміст відображався коректно.
Якщо CSS властивість height встановлюється числове значення (наприклад, пікселі, (r)em, відсотки), тоді, якщо вміст не міститься в межах зазначеної висоти, його буде переповнено. Як контейнер оброблятиме переповнений вміст, визначається властивістю overflow.
Примітка: CSS властивість min-height та max-height перевизначає властивість height .
| Значення за замовчуванням: |
auto |
|---|
| Успадковано: |
no |
|---|
| Анімований: |
yes. Читайте про animatable Спробуй |
|---|
| Версія: |
CSS1 |
|---|
| JavaScript синтаксис: |
object.style.height="500px" Спробуй |
|---|
Підтримка height
Цифри в таблиці вказують першу версію браузера, яка повністю підтримує цю властивість.
Синтаксис height
Значення height
| Значення |
Опис |
Демонстрація |
|---|
| auto |
Браузер обчислює висоту. Це значення за замовчуванням |
Демо ❯ |
| length |
Визначає висоту px, cm і т.д. Читайте про одиниці вимірювання довжини |
Демо ❯ |
| % |
Визначає висоту вмісту блоку у відсотках |
Демо ❯ |
| initial |
Встановлює для цієї властивості значення за промовчанням. Читайте про initial |
| inherit |
Наслідує цю властивість від свого батьківського елемента. Читайте про inherit |
Приклади height
Встановити висота елемента має становити 50% від висоти батьківського елемента:
Сторінки на тему height
Надіслати повідомлення
"Повідомити про помилку" або "Переклад сторінки" можна надіслати на пошту або за формою:
Форма відправлення:
Дякую Вам за те, що допомагаєте!
Ваше повідомлення було надіслано до SchoolsW3.
Width та height: визначаємо розміри елемента
Для того, щоб об'єкту можна було задати певну ширину і висоту, в CSS існують дві властивості - width і height (відповідно) З їх допомогою ви можете встановлювати фіксовані розміри елементів, сайдбар, зображення, таблиця або будь-який блок.
Особливості обчислення ширини та висоти
Для визначення ширини або висоти об'єкта можна використовувати будь-які одиниці виміру довжини в CSS. елемент обчислюється, виходячи з ширини вікна браузера (при зміні користувачем ширини вікна значення width буде перераховано).
Як значення ширини можна використовувати і одиницю em , яка є приблизно тим самим, ніж і розмір шрифту тексту, але тільки в умовних одиницях. Наприклад, ви встановили розмір для шрифту 24px . ви поставите width: 2em , то ширина складе 2×24px = 48 пікселівЯкщо розмір шрифту не встановлено, він буде успадкований.
Висота height, задана у відсотках, обчислюється аналогічним чином, що й ширина, але розрахунок ґрунтується вже на висоті батьківського елемента, а не на його ширині.
Відсоткова ширина та висота дочірнього елемента обчислюються на підставі розмірів батька
Що входить у ширину та висоту
Відразу варто запам'ятати, що властивості width і height мають особливість — вони не включають в себе значення margin , padding і border .
Таким чином, для того, щоб обчислити, наприклад, фактичну ширину елемента (місце, яке він насправді займе на екрані), знадобиться трохи арифметики. Фактична ширина - це сума значень, таких як width, padding, border і margin. Нагадаємо, що раніше ми розглядали, як виглядає блокова модель CSS.
Для закріплення знань покажемо приклад. Допустимо, у вас є елемент із таким стилем:
width: 200px; margin-left: 15px; margin-right: 15px; padding-left: 10px; border-left: 3px solid #333;
Для підрахунку фактичної ширини елемента виконаємо додавання:
width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактична ширина)
Рекомендації по висоті
Властивість height може бути зручним, якщо треба точно контролювати, наприклад висоту зображення. Однак, якщо контейнер містить текст або будь-який інший контент, у якого може змінюватись висота, вкрай не рекомендується встановлювати фіксовану висоту для контейнера, оскільки подібна верстка може призвести до несподіваного результату — контент буде відображатися поверх іншого вмісту.
Замість фіксованої висоти використовувати height: auto - цей запис означає, що висота об'єкта буде розраховуватися автоматично, залежно від вмісту, який він містить.
Інший спосіб уникнути розвалу верстки - використовувати запис overflow: auto. У разі, якщо висота вмісту перевищуватиме значення height свого контейнера, браузер додасть до контейнера смугу прокручування.
У наступному уроці ви дізнаєтеся, як можна перевизначати ширину елемента за допомогою цікавої та дуже корисної властивості box-sizing.
Який параметр визначає висоту елемента?
Розміри елементів задаються за допомогою властивостей width (ширина) та height (висота).
Значення за умовчанням цих властивостей - auto , тобто браузер сам визначає ширину і висоту елемента. Можна також задати розміри за допомогою одиниць вимірювання (пікселів, em) або за допомогою відсотків:
width: 150px; width: 75%; height: 15em;
Пікселі визначають точні ширину та висоту. Одиниця виміру em залежить від висоти шрифту елемента. Якщо розмір шрифту елемента, наприклад, дорівнює 16 пікселів, то 1 em для цього елемента дорівнює 16 пікселів. Тобто якщо у елемента встановити ширину 15em, то фактично вона становитиме 15 * 16 = 230 пікселів. Якщо ж елемент не має розміру шрифту, він буде взятий з успадкованих параметрів або значень за замовчуванням.
Відсоткові значення властивості width обчислюються на підставі ширини елемента-контейнера. Якщо, наприклад, ширина елемента body на веб-сторінці становить 1000 пікселів, а вкладений елемент має ширину 75%, то фактична ширина цього блоку становить 1000 * 0.75 = 750 пікселів. Якщо користувач змінить розмір вікна браузера, то ширина елемента body і ширина вкладеного в нього блоку div теж зміниться.
Відсоткові значення для якості height працюють аналогічно властивості width, тільки тепер висота обчислюється по висоті елемента-контейнера.
Розміри в CSS3 div.outer < width: 75%; height: 200px; margin: 10px; border: 1px solid #ccc; background-color: #eee; >div.inner
У той же час фактичні розміри елемента можуть у результаті відрізнятися від тих, які встановлені у властивості width і height. Наприклад:
Розміри в CSS3 div.outer
Визначення фактичного розміру CSS 3
Як видно на скріншоті, в реальності значення властивості width - 200px - визначає лише ширину внутрішнього вмісту елемента, а під блок самого елемента виділятиметься простір, ширина якого дорівнює ширині внутрішнього вмісту (властивість width) + внутрішні відступи (властивість padding) + ширина властивість border-width) + зовнішні відступи (властивість margin). Тобто елемент матиме ширину 230 пікселів, а ширина блоку елемента з урахуванням зовнішніх відступів складе 250 пікселів.
Подібні розрахунки слід враховувати щодо розмірів елементів.
За допомогою додаткового набору властивостей можна встановити мінімальні та максимальні розміри:
- min-width : мінімальна ширина
- max-width : максимальна ширина
- min-height: мінімальна висота
- max-height: максимальна висота
min-width: 200px; width:50%; max-width: 300px;
В даному випадку ширина елемента дорівнює 50% ширини елемента-контейнера, проте при цьому не може бути менше 200 пікселів і більше 300 пікселів.
Перевизначення ширини блоку
Властивість box-sizing дозволяє перевизначити встановлені розміри елементів. Воно може приймати одне з таких значень:
content-box : значення властивості за замовчуванням, при якому браузер для визначення реальних ширини та висоти елементів додає бере відповідно значення властивостей width та height елемента . Наприклад:
width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: content-box;
В даному випадку елемент матиме ширину 200 пікселів і висоту 100 пікселів.
width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: padding-box;
width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: border-box;
Наприклад, визначимо два блоки, які відрізняються лише значенням властивості box-sizing:
Розміри в CSS3 div < width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; >div.outer1 < box-sizing: content-box; >div.outer2
Визначення фактичного розміру CSS 3
Визначення фактичного розміру CSS 3
У першому випадку при визначенні розмірів блоку до властивостей width і height будуть додаватися товщина кордону, а також внутрішні та зовнішні відступи, тому перший блок матиме великі розміри:
