| 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
- Успадковує значення батька.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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.
Об'єктна модель
[window.] Document.getElementById (" elementID "). Style.width
Браузери
Браузер Internet Explorer 6 некоректно визначає width як min-width . У режимі сумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно обчислює ширину елементу, не додаючи до неї значення відступів, полів і меж.
Internet Explorer до версії 7.0 включно не підтримує значення inherit .