Пример
Устанавливает высоту и ширину параграфа:<html>
<head>
<meta charset="utf-8" />
<style>
img.normal { height:auto; }
img.big { height:120px; }
p.ex { height:100px; width:100px; }
</style>
</head>
<body>
<img class="normal" src="/images/xhtml-css.png" width="130" height="102" /><br />
<img class="big" src="/images/xhtml-css.png" width="130" height="102" />
<p class="ex">Высота и ширина этого параграфа 100px.</p>
<p>Это некоторый текст в параграфе. Это некоторый текст в параграфе.
Это некоторый текст в параграфе. Это некоторый текст в параграфе.
Это некоторый текст в параграфе. Это некоторый текст в параграфе.
Это некоторый текст в параграфе. Это некоторый текст в параграфе.
</p>
</body>
</html>
Определение и использование
Свойство width устанавливает ширину элемента.
Примечание: Свойство width не включает заполнение, границы и поля!
| Значение по умолчанию: | auto |
|---|---|
| Унаследованный: | нет |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.width="50px" |
Поддержка браузеров
Свойство width поддерживается во всех ведущих браузерах.
Примечание: Ни одна из версий Internet Explorer (включая IE8) не поддерживает значение "inherit".
Значения свойства
| Значение | Описание |
|---|---|
| auto | Браузер вычисляет ширину. Это по умолчанию |
| length | Указывает ширину в px, cm, и так далее. |
| % | Указывает ширину в процентах от включающего блока |
| inherit | Указывает, что значение ширины должно быть унаследовано от родительского элемента |
Связанные страницы
CSS пособие: CSS Размеры
CSS пособие: CSS Модель "коробки"
CSS ссылка: height
jQuery пособие: css()
Больше примеров
Пример
Этот пример демонстрирует как установить ширину элемента используя значение процентов.<html>
<head>
<meta charset="utf-8" />
<style>
img.normal { width:auto; }
img.big { width:50%; }
img.small { width:10%; }
</style>
</head>
<body>
<img class="normal" src="/images/xhtml-css.png" width="130" height="102" /><br />
<img class="big" src="/images/xhtml-css.png" width="130" height="102" /><br />
<img class="small" src="/images/xhtml-css.png" width="130" height="102" />
</body>
</html>
Была ли эта информация полезной?
