CSS Висота, ширина і максимальна ширина
CSS властивості height та width використовуються для встановлення висоти та ширини елемента.
CSS властивість max-width використовується для встановлення максимальної ширини елемента.
Спробуйте самі »
CSS Налаштування висоти і ширини
Властивості height і width використовуються для встановлення висоти і ширини елемента.
Властивості висоти і ширини не включають padding (відступи), border (межі) або margin (поля). Вони встановлюють висоту/ширину області всередині відступу, межі і поля елемента.
CSS Значення height/width
Властивості height та width можуть мати наступні значення:
auto- Це за замовчуванням. Браузер розраховує висоту і ширину автоматичноlength- Визначає висоту/ширину в px, cm і т.д.%- Визначає висоту/ширину в процентах від блоку, що міститьinitial- Визначає висоту/ширину в значення за замовчуваннямinherit- Висота/ширина будуть успадковані від батьківського значення
CSS height/width Приклади
Приклад
Встановіть висоту і ширину елемента <div>:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Приклад
Встановіть висоту і ширину іншого елемента <div>:
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Примітка: Пам’ятайте, що властивості height та width не містять відступи (padding), межі (border) та поля (margin)! Вони встановлюють висоту/ширину області всередині відступу, межі та поля елемента!
Встановлення максимальної ширини - max-width
Властивість max-width використовується для встановлення максимальної ширини елемента.
Властивість max-width можна вказувати в значеннях довжини, таких як px, cm і т.д. або в процентах (%) від блоку, що містить, або встановіть значення none (це значення за замовчуванням - означає, що максимальна ширина відсутня).
Проблема з <div> вище виникає, коли вікно браузера менше ширини елемента (500 пікселів), бо браузер додає на сторінку горизонтальне колесо прокрутки.
Використання max-width замість цього в даній ситуації покращить роботу браузера з невеликими вікнами.
Порада: Змініть вікно браузера на ширину менше за 500 пікселів, щоб побачити різницю між двома div-ами!
Примітка: Значення властивості max-width перевизначає width.
Приклад
Цей <div> елемент має висоту 100 пікселів і максимальну ширину 500 пікселів:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
Спробуйте самі - Приклади
Встановіть висоту і ширину елементів
Цей приклад демонструє, як встановити висоту і ширину різних елементів.
Встановіть висоту і ширину зображення, використовуючи проценти
Цей приклад демонструє, як встановити висоту і ширину зображення, використовуючи процентне значення.
Встановіть мінімальну ширину і максимальну ширину елемента
Цей приклад демонструє, як встановити мінімальну ширину і максимальну ширину елемента, використовуючи значення в пікселях.
Встановіть мінімальну висоту і максимальну висоту елемента
Цей приклад демонструє, як встановити мінімальну висоту і максимальну висоту елемента, використовуючи значення в пікселях.
Перевірте себе за допомогою вправ!
Всі властивості CSS Розмірів
| Властивість | Опис |
|---|---|
| height | Встановлює висоту елемента |
| max-height | Встановлює максимальну висоту елемента |
| max-width | Встановлює максимальну ширину елемента |
| min-height | Встановлює мінімальну висоту елемента |
| min-width | Встановлює мінімальну ширину елемента |
| width | Встановлює ширину елемента |
