CSS свойство height

❮ Назад Вперед ❯

Свойство height используется для установления высоты элемента. Свойство не включает padding, borders или margins. Свойство может быть установлено в единицах длины (например, "px", "cm", "vh" или проценты). Значение по умолчанию - "auto".

Если использованы свойства min-height и max-height, свойство height будет переопределено.

Отрицательные значения недопустимы.

Значение по умолчанию	auto
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Да. Высота анимируема.
Версия	CSS1
DOM синтаксис	object.style.height = "400px"

Синтаксис

height: auto | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      height: 60px;
      background-color: #1c87c9;
      color: #eee;
      }
      p {
      height: 30px;
      background-color: #8ebf42;
      color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства height</h2>
    <div>Высота этого div элемента равна "60px".</div>
    <p>Высота этого параграфа равна "30px".</p>
  </body>
</html>

Попробуйте сами!

Пример, где высота установлена для изображения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {background-color: #ccc;}
      .height-normal {height: auto;}
      .height-big {height: 100px;}
    </style>
  </head>
  <body>
    <h2>Пример свойства height</h2>
    <p>Высота установлена как "auto"</p>
    <img class="height-normal" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"><br>
    <hr>
    <p>Высота этого изображения равна "100px".</p>
    <img class="height-big" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
  </body>
</html>

Попробуйте сами!

Пример, где высота контейнера установлена в "vh":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container {
      height: 50vh;
      border: 2px solid #1c87c9;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства heigh</h2>
    <div class="container">
      <p>Высота равна "50vh".</p>
    </div>
  </body>
</html>

Попробуйте сами!

Пример со всеми значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .red-container {
      height: 30vh;
      border: 2px solid #f45e30;
      color: #f45e30; 
      }
      .blue-container {
      height: 40%;
      width: 30%;
      border: 2px solid #1c87c9; 
      color: #1c87c9;
      margin-top: 20px;
      }
      .orange-container {
      height: 100px;
      border: 2px solid #f9fc35;
      color: #f9fc35;
      margin-top: 20px;
      }
      .green-container {
      height: auto;
      border: 2px solid #8ebf42;
      color: #8ebf42;
      margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства height</h2>
    <div class="red-container">
      Height 30vh
      <div class="blue-container">
        Height 40%
      </div>
    </div>
    <div class="orange-container">
      Height 100px;
    </div>
    <div class="green-container">
      Height (auto)
    </div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	При использовании этого значения браузер вычисляет оригинальную высоту изображения или блока. Значение по умолчанию.
length	Устанавливает высоту в единицах длины (px, cm и т. д.).
%	Устанавливает высоту в процентах.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.