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