height¶
Свойство height
устанавливает высоту блочных или заменяемых элементов (к ним, например, относится <img>
). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow
: auto
к стилю элемента.
Блоки
- height
- width
- max-height
- max-width
- min-height
- min-width
Синтаксис¶
/* Keyword value */
height: auto;
/* <length> values */
height: 120px;
height: 10em;
/* <percentage> value */
height: 75%;
/* Global values */
height: inherit;
height: initial;
height: unset;
Значения¶
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto
устанавливает высоту исходя из содержимого элемента.
Значение по-умолчанию:
height: auto;
Применяется к: К блочным и заменяемым элементам
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>height</title>
<style>
.layer {
height: 50px; /* Высота блока */
overflow: scroll; /* Добавляем полосы прокрутки */
background: #fc0; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div class="layer">
Чернозём, в сочетании с традиционными агротехническими
приемами, локально снижает фраджипэн. Суглинок
перманентно растворяет биокосный краснозём в полном
соответствии с законом Дарси.
</div>
</body>
</html>