|
Для браузера 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. |
К столбцам таблицы, наоборот, данное свойство применимо в соответствие со спецификацией 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:
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', '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. |
Сравните с 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. |
Если значения свойств 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 применяются следующие правила: