Свойство width

       
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ош. Част. Да Да Да Да Да Да Да Да Да Да Да Да

Част. - Частично

Ош. - Ошибки

Версия CSS CSS1
Значение по умолчанию auto
Применяется К блочным элементам
Аналог HTML <img width>, <table width>

Описание свойства width

Свойство width нужно для установки ширины элементов, как блочных, так и заменяемых (например <IMG>). Свойство width не включает в себя толщину границ, значение отступов и значение полей.

Разные браузеры по разному работают с шириной. Результат зависит от используемого DOCTYPE. В таблице приведены возможные варианты DOCTYPE и результат получаемой ширины.

Действие width браузерах
DOCTYPE Internet Explorer Firefox Opera
Не указан Если заданная ширина блока меньше содержимого, то этот блок изменяет эту ширину, подстраиваясь под содержимое. Иначе ширина этого блока равна значению width.

Во всех случаях Firefox действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.

Ширина равна значению width.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

«Переходный»
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
«Строгий»
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Ширина формируется путем сложения значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, то отображается поверх .

Ширина равна значению width плюс padding, margin, и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Запись в CSS

width: значение | проценты | auto | inherit

Применяемые значения

Для значений можно использовать любые единицы длины — пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентного    значения, ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родителя нет или он указан не явно, то в его качестве выступает окно браузера.

auto - Устанавливает ширину в зависимости от типа и содержимого элемента.
inherit - Как у родителя.

Пример использования свойства width

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>   <title>Свойство width</title>   <style type="text/css">    .lay1 {     width: 250px; /* Ширина блока */     background: #cff; /* Цвет фона */     padding: 5px; /* Поля вокруг текста */     border: 1px solid #aaa; /* Параметры рамки */    }    .lay2 {     width: 400px; /* Ширина текстового блока */    }   </style>  </head>  <body>      <div class="lay1">    <p class="lay2">Просто текст, для примера.     Этот текст должен выйти за пределы блока lay1     так как ширина блока lay2 больше ширины блока lay1</p>   </div>     </body> </html>

Результат

Свойство width

Объектная модель

[window.]document.getElementById("elementID").style.width

Браузеры

IE 6 не совсем правильно определяет width как min-width. В режиме несовместимости (quirk mode) Internet Explorer до 9 версии неправильно вычисляет ширину элемента. Он не добавляет к ширине  значение отступов, значение полей и толщину границ.

IE до восьмой версии не понимает значение inherit.

Список свойств