css властивість width
Властивість width задає висоту елемента.
Ширина не включає товщину кордонів навколо елемента, значення відступів і полів.
Ви можете використовувати в якості значень одиниці довжини, проценти або ключові слова.
Якщо використовувати відсотки (%) для задання ширини, треба пам'ятати, що відсоток базується на батьківському елементі, тобто ширині контейнера. Якщо батьківський елемент має встановлені 480 пікселів в якості ширини - , то процент буде залежати саме від цього значення. Отже, наприклад нащадок з 50% ширини, матиме насправді 50% від 480 пікселів, тобто 240 пікселів.
Також зверніть увагу на властивості min-width і max-width.
| Нотатка: | Властивості |
| Нотатка: | Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості |
Синтакс
width: auto|value|initial|inherit;Властивість width може отримувати 5 значень:
autoБраузер самостійно обчислить ширину елемента. Без задання.
lengthВ якості значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін.
%Визначає ширину у відсотках. Ширина розраховується в залежності від ширини батьківського елемента. Якщо батька немає, в його якості виступає вікно браузера.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.width="500px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| width | 1.0 |
8.0 |
1.0 |
1.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| width | 1.0 |
1.0 |
1.0 |
Приклади
Динамічний приклад
Демонстрація роботи властивості
Встановлюємо ширину для елементів.
Встановлює ширину абзацу з класом ex в 100 пікселів.
p.ex {
height: 100px;
width: 100px;
}