height CSS

Свойство height устанавливает высоту блочных или заменяемых элементов (к ним, например, относится <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.

Свойство `height` устанавливает высоту блочных или заменяемых элементов (к ним, например, относится [`<img>`](/html/img/)). Высота не включает толщину границ вокруг элемента, значение отступов и полей. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте [`overflow`](/css/overflow/): `auto` к стилю элемента.
Значение по умолчанию:

auto

Значение по умолчанию:
`auto`
Наследуется:
Нет
Применяется:

К блочным и заменяемым элементам

Применяется:
К блочным и заменяемым элементам
Анимируется:
Да
Объект JavaScript:

object.style.height

Объект JavaScript:
`object.style.height`
Спецификации:
Спецификации:
* [CSS Basic Box Model](https://drafts.csswg.org/css-box-3/#width-and-height) * [CSS Transitions](http://dev.w3.org/csswg/css-transitions/#animatable-css) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/visudet.html#the-height-property) * [CSS Level 1](http://www.w3.org/TR/CSS1/#height)

Синтаксис

/* Keyword value */
height: auto;

/* <length> values */
height: 120px;
height: 10em;

/* <percentage> value */
height: 75%;

/* Global values */
height: inherit;
height: initial;
height: unset;

Синтаксис

/* 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 устанавливает высоту исходя из содержимого элемента.

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. `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>

Примеры

<!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>

Содержание

  • Синтаксис
      /* Keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /* Global values */ height: inherit; height: initial; height: unset;
  • Значения
    • Примеры
        <!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>

    В начало