| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Наслідується | Ні |
| Застосовується | До блокових елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/visudet.html#propdef-width |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює ширину блочних чи замінюючих елементів (наприклад, елементу <img>). Ширина не включає товщину меж навколо елемента, значення відступів та полів.
Браузери по-різному обробляють ширину, результат відображення залежить від використаного <!DOCTYPE>. У табл. 1 наведені можливі варіанти <!DOCTYPE> та отримувана ширина.
| <!DOCTYPE> | Internet Explorer | Opera 10+, Firefox, Chrome, Safari | Opera 9 |
|---|---|---|---|
| Не вказано (режим сумісності) | Якщо вміст перевищує задану ширину, то блок змінює свої розміри, пристосовуючись до вмісту. В іншому випадку ширина блоку дорівнює значенню width. | У всіх випадках браузер діє згідно специфікації CSS. А саме, ширина блоку отримується сумуванням значень width, padding, margin та border. Вміст блоку, якщо не вміщується в задані розміри, відображається поверх блоку. |
Ширина дорівнює значенню width. Вміст блоку, якщо не вміщується в задані розміри, відображається поверх. |
| Перехідний HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
|||
| Строгий HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
Ширина формується шляхом сумування значень width, padding, margin та border. Вміст блоку, якщо не вміщується в задані розміри, відображається поверх. |
Ширина дорівнює значенню width плюс padding, margin та border. Вміст блоку, якщо не вміщується в задані розміри, відображається поверх. |
|
| HTML 5 <!DOCTYPE html> |
|||
| XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> |
Синтаксис
width: значення | відсотки | auto | inherit
Значення
В якості значень приймаються будь-які одиниці довжини, прийняті в CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При використанні відсоткового запису ширина елемента обчислюється залежно від ширини батьківського елемента. Якщо батько явно не вказаний, то ним виступає вікно браузера.
- auto
- Встановлює ширину виходячи з типу та вмісту елемента.
- inherit
- Наслідує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!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,consectetuer
adipiscing elit,seddiem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat.</p>
</div>
</body>
</html>Результат цього прикладу, як він відображається в браузері Safari показано на рис. 1.
Рис. 1. Ширина блока
Об'єктна модель
[window.]document.getElementById("elementID").style.width
Браузери
Браузер Internet Explorer 6 некоректно визначає width як min-width. В режимі сумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно обчислює ширину елемента, не додаючи до неї значення відступів, полів та меж.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.