CSS width

Slyweb

Поиск CSS свойств и HTML элементов:

Все CSS свойства и HTML элементы справочника

[Свойство] width

Раздел "Визуальная модель документа"

Свойство определяет ширину содержимого элемента.

Значения

Значения:	em, ex, px, pt, in, cm, mm, pt, pc \| % \| auto \| inherit
Исходное значение:	auto
Применяется:	ко всем элементам, за исключением строк таблиц, незаменяемых строчных элементов и групп строк
Наследование:	не наследуется
Процентное соотношение:	в зависимости от содержащего блока
Источник отображения:	визуальный

Синтаксис

width

Браузеры:

Описание

Для браузера Internet Explorer 5 версии данное свойство некорректно определяет ширину элемента, в значение width в этом браузере включены внешние отступы и рамка элемента, хотя, согласно спецификации данное свойство должно определять только ширину содержимого.

Свойство width может применяться ко всем элементам за исключением строчных элементов и элементов со свойством display: inline, inline-table, compact и run-in.

Исходя из этого правила, в следующем примере свойство width бессмысленно применять для строк таблицы:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2. <HTML>
  3. <HEAD>
  4.  <TITLE>Свойство width</TITLE>
  5.  <STYLE type="text/css">
  6. .trclass { width:500px; }
  7.  </STYLE>
  8. </HEAD>
  9. <BODY id="body">
10.  <table border="2px">
11.  <tr class="trclass">
12.  <td class="tdclass">Я строка</td>
13. </tr>
14. </table>
15. </BODY>
16. </HTML>
17.

К строкам таблицы свойство width не применимо

К столбцам таблицы, наоборот, данное свойство применимо в соответствие со спецификацией CSS:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2. <HTML>
  3. <HEAD>
  4.  <TITLE>Свойство width для столбцов</TITLE>
  5.  <STYLE type="text/css">
  6. .tdclass { width:500px; }
  7.  </STYLE>
  8. </HEAD>
  9. <BODY id="body">
10. <table border="2px">
11.  <tr class="trclass">
12.  <td class="tdclass">Я столбец</td>
13. </tr>
14. </table>
15. </BODY>
16. </HTML>
17.

К столбцам совйство width применимо, а к строкам нет

Значения свойства width:

Любые единицы измерения - em, ex, px, pt, in, cm, mm, pt, pc
Проценты - %
Auto – значение определяется браузером.

Значения свойства width не могут быть отрицательными.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2. <HTML>
  3.    <HEAD>
  4.       <TITLE>Свойство width</TITLE>
  5. <STYLE type="text/css">
  6. P {width:300px; border:2px dashed grey;}
  7. </STYLE>
  8.    </HEAD>
  9.    <BODY id="body">
10. <p>
11. Свойство width может применяться ко всем 
12. блокам за исключением строчных  блоков и 
13. блоков со свойством display: inline, 
14. inline-table, compact и run-in.</p>
15.    </BODY>
16. </HTML>
17.

Пример свойства width

Вычисление свойств width и margin в зависимости от типа элемента.

В большинстве случаев для следующих свойств: 'width', 'margin-left', 'margin-right', 'left' и 'right' значение вычисляется его простым указанием, однако для некоторых элементов применяются специальные правила. Специальные правила предусмотрены для следующих элементов:

Строчные заменяемые элементы;
Строчные не заменяемые элементы;
Блочные незаменяемые элементы в нормальном потоке;
Блочные заменяемые элементы в нормальном потоке;
«Плавающие» незаменяемые элементы;
«Плавающие» заменяемые элементы;
Незаменяемые элементы с абсолютным позиционированием;
Заменяемые элементы с абсолютным позиционированием.

Строчные незаменяемые элементы

К строчным незаменяемым элементам свойство width не применяется. Свойства left, right margin-left, margin-right со значением auto, устанавливаются равными 0. Незаменяемые элементы – это элементы, атрибуты которых не заменяются новым объектом – span, em.

Строчные заменяемые элементы

К строчным заменяемым элементам свойство width по общему правилу не применяется. Однако значение auto устанавливает его равным 0. Свойства left, right margin-left, margin-right со значением auto, соответствуют 0. Заменяемые элементы – это элементы, атрибуты которых заменяются новым объектом – img, input.

Блочные заменяемые элементы

Ширина блочного элемента (не содержимого элемента (width)) определяется следующей формулой = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

Свойство border: none; соответствует border: 0;

Если свойство width установлено как auto, то все остальные свойства со значением auto этого же элемента устанавливаются равными 0.

Если свойства margin-left, margin-right одновременно имеют значение auto, их действительное значение будет соответствовать значению разделенной поровну ширине блока, в котором находится блок с данными свойствами, то есть элемент будет отцентрирован внутри родительского элемента.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE>Элемент расположенный по центру</TITLE>
  5. <style type="text/css">
  6. DIV {
  7. width:200px;
  8. height:100px;
  9. background:#cadceb;
10. padding:10px;
11. border:1px solid #000;
12. margin:auto;
13. }
14. </style>
15. </HEAD>
16. <BODY>
17. <div>
18. Элемент div расположенный по центру страницы
19. </div>
20. </BODY>
21. </HTML>
22. 
23.

Пример элемента, расположенного по центру

Указание одновременно двух свойств margin-left и margin-right приведет к тому, что свойство margin-right будет игнорироваться. Противоположное правило применяется к свойству margin-left, если direction установлено как rtl.

  1. <HTML>
  2.    <HEAD>
  3.       <TITLE>Пример свойства width</TITLE>
  4. <STYLE type="text/css">
  5. body {
  6. width:300px;
  7. border:2px solid grey;
  8. }
  9. P {
10. margin-left: 30px;
11. margin-right: 30px;
12. width:150px; 
13. border:2px dashed grey; 
14. }
15. </STYLE>
16.    </HEAD>
17.    <BODY id="body">
18. <p>
19. Указание одновременно двух свойств margin-left
20.  и margin-right приведет к тому, что свойство 
21.  margin-right будет игнорироваться, однако, 
22.  если свойство direction установлено как ltr, 
23.  то проигнорировано будет свойство margin-left.</p>
24.    </BODY>
25. </HTML>
26.

Пример свойства width

Сравните с direction - rtl.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2. <HTML>
  3.    <HEAD>
  4.       <TITLE>Особенности свойства direction:rtl</TITLE>
  5. <STYLE type="text/css">
  6. body {
  7. direction:rtl;
  8. width:300px;
  9. border:2px solid grey;
10. }
11. P {
12. width:150px; 
13. border:2px dashed grey; 
14. margin-left: 30px;
15. margin-right: 30px;
16. }
17. </STYLE>
18.    </HEAD>
19.    <BODY id="body">
20. <p>
21. Указание одновременно двух свойств margin-left
22.  и margin-right приведет к тому, что свойство
23.  margin-right будет игнорироваться, если 
24.  свойство direction установлено как rtl, 
25.  то проигнорировано будет свойство margin-left.</p>
26. </BODY>
27. </HTML>
28.

Пример свойства direction:rtl

«Плавающие» заменяемые элементы и «плавающие» незаменяемые элементы

Если значения свойств left, right margin-left, margin-right, width равно auto их действительное вычисленное значение будет соответствовать 0. Для плавающих заменяемых элементов, если значение свойства width установлено как auto, то их действительное значение ширины будет определяться содержимым элемента.

Абсолютно позиционированные, незаменяемые элементы

Ширина исходного элемента определяется следующей формулой = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

Согласно спецификации CSS2 применяются следующие правила:

Одновременное указание двух свойств left и right, при свойстве width:auto, растягивает ширину элемента на максимально допустимое расстояние, смещая его справа и слева установленными значениями свойств left и right. Значение свойства width отличное от auto, приведет к тому, что свойство right будет игнорироваться, а смещение устанавливаться только свойством left.
Свойство width:auto заменяет значение auto свойств left и right на 0.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Доступ и установка с jQuery

Получить свойство width: val = $("div").css("width");
Установить свойство width: $("div").css({"width":"..."});
Установить свойство width: $("div").css("width","...");

"jQuery для начинающих"

CSS свойство появилось в CSS 1.0 (CSS свойства width - www.w3.org/width)

Форма для комментариев

Версия справочника CSS 1.0 Справочник CSS создан 2010-12-01

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

1.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
2.	<HTML>
3.	<HEAD>
4.	<TITLE>Свойство width</TITLE>
5.	<STYLE type="text/css">
6.	.trclass { width:500px; }
7.	</STYLE>
8.	</HEAD>
9.	<BODY id="body">
10.	<table border="2px">
11.	<tr class="trclass">
12.	<td class="tdclass">Я строка</td>
13.	</tr>
14.	</table>
15.	</BODY>
16.	</HTML>
17.

1.	<HTML>
2.	<HEAD>
3.	<TITLE>Пример свойства width</TITLE>
4.	<STYLE type="text/css">
5.	body {
6.	width:300px;
7.	border:2px solid grey;
8.	}
9.	P {
10.	margin-left: 30px;
11.	margin-right: 30px;
12.	width:150px;
13.	border:2px dashed grey;
14.	}
15.	</STYLE>
16.	</HEAD>
17.	<BODY id="body">
18.	<p>
19.	Указание одновременно двух свойств margin-left
20.	и margin-right приведет к тому, что свойство
21.	margin-right будет игнорироваться, однако,
22.	если свойство direction установлено как ltr,
23.	то проигнорировано будет свойство margin-left.</p>
24.	</BODY>
25.	</HTML>
26.

Подробный справочник CSS и HTML