W3docs
ru
Войти

Свойство CSS height

The CSS height property sets the height of the element. Try examples with each of this property’s value.

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

Если используются свойства min-height и max-height, они ограничивают значение свойства height.

Если для height установлено одно из числовых значений, таких как rem, px или %, и содержимое не помещается в указанную высоту, это приведет к переполнению. Свойство CSS overflow определяет, как контейнер будет обрабатывать переполнение.

info

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

Начальное значениеauto
Применяется квсем элементам
НаследуетсяНет.
АнимацияДа. Высота анимируется.
ВерсияCSS1
Синтаксис DOMobject.style.height = "400px";

Синтаксис

Синтаксис свойства CSS height

height: auto | length | initial | inherit;

Пример свойства height:

Пример свойства CSS height со значением length

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        height: 60px;
        background-color: #1c87c9;
        color: #eee;
      }
      p {
        height: 30px;
        background-color: #8ebf42;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Height property example</h2>
    <div>The height of this div element is set to "60px".</div>
    <p>The height of this paragraph is set to "30px".</p>
  </body>
</html>
Попробуйте сами »

Результат

Свойство CSS height

Пример свойства height с тегом HTML <image>:

Пример свойства CSS height со значениями auto и length

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .height-normal {
        height: auto;
      }
      .height-big {
        height: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Height property example</h2>
    <p>Here the height is set to "auto"</p>
    <img class="height-normal" src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <br />
    <hr />
    <p>The height for this image is defined as "100px".</p>
    <img class="height-big" src="https://www.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
  </body>
</html>
Попробуйте сами »

Пример свойства height со значением "length":

Пример свойства CSS height при использовании значения vh

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .container {
        height: 50vh;
        border: 2px solid #1c87c9;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Height property example</h2>
    <div class="container">
      <p>Here the height is specified as "50vh".</p>
    </div>
  </body>
</html>
Попробуйте сами »

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

Пример свойства CSS height со значениями auto, vh, % и px

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</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 property example</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, em, rem, vh и т. д.Запустить »
%Задаёт высоту в процентах.
initialЗаставляет свойство использовать значение по умолчанию.Запустить »
inheritНаследует свойство от родительского элемента.

Практика

Практика

Какие возможные значения можно задать для свойства height в CSS?