Встановлює ширину вмісту елемента. За замовчуванням ширина залежить від типу елемента: блокові займають всю доступну ширину; ширина рядково-блочних дорівнює ширині їхнього вмісту. Властивість width дозволяє явно задати бажану ширину елемента, незважаючи на його вихідну поведінку.
Якщо для елемента властивість box-sizing задано як border-box, то width визначає ширину блоку.
Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів, за винятком рядкових і рядків таблиць |
| Анімується | Так |
Синтаксис
<code>width: <розмір> | <відсотки> | auto
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
В якості значень приймаються будь-які одиниці довжини, прийняті в CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При використанні процентного запису ширина елемента визначається залежно від ширини батьківського елемента. Якщо батько явно не вказаний, то його якість виступає вікно браузера.
- auto
- Встановлює ширину, виходячи з типу та вмісту елемента.
Пісочниця
div { width: <span class="playground-active">{{ playgroundValue }}%</span>; }Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>width</title> <style> .layer1 { width: 300px; /* Ширина блоку */
background: #fc0; /* Колір тла */
padding: 7px; /* Поля навколо тексту */
border: 1px solid #ccc; /* Параметри рамки */
}
.layer2 { width: 400px; /* Ширина текстового блоку */
}
</style>
</head>
<body> <div class="layer1"> <p class="layer2">Lorem ipsum dolor sit amet;
</div>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Ширина блоку
Об'єктна модель
Об'єкт .style.width
Примітка
Браузер Internet Explorer до версії 6 включно некоректно визначає width як min-width. У режимі сумісності (quirk mode) Internet Explorer до версії 8 включно неправильно обчислює ширину елемента, не додаючи значення відступів, полів і меж.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 | Робочий проект |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 4 | 8 | 12 | 1 | 3.5 | 1 | 1 |
| 1 | 1 | 4 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.