W3docs
es
Iniciar sesión

Propiedad height de CSS

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

La propiedad height se utiliza para establecer la altura de un elemento. Esta propiedad no incluye padding, bordes ni márgenes. La propiedad height puede especificarse en "px", "cm", "vh" o en porcentajes. El valor predeterminado es "auto".

Si se utilizan las propiedades min-height y max-height, estas restringen la propiedad height.

Si height se establece en uno de los valores numéricos como rem, px o %, y el contenido no cabe dentro de la altura especificada, esto provocará un desbordamiento. La propiedad CSS overflow especifica cómo el contenedor gestionará el desbordamiento.

info

Los valores negativos no están permitidos.

Valor inicialauto
Se aplica atodos los elementos
HeredadoNo.
AnimableSí. La altura es animable.
VersiónCSS1
Sintaxis DOMobject.style.height = "400px";

Sintaxis

Sintaxis de la propiedad height de CSS

height: auto | length | initial | inherit;

Ejemplo de la propiedad height:

Ejemplo de la propiedad height de CSS con valor 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>
Pruébalo tú mismo »

Resultado

CSS height Property

Ejemplo de la propiedad height con la etiqueta HTML <image>:

Ejemplo de la propiedad height de CSS con valores auto y 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>
Pruébalo tú mismo »

Ejemplo de la propiedad height con el valor "length":

Ejemplo de la propiedad height de CSS al usar el valor 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>
Pruébalo tú mismo »

Ejemplo de la propiedad height con todos los valores:

Ejemplo de la propiedad height de CSS con valores auto, vh, % y 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>
Pruébalo tú mismo »

Valores

ValorDescripciónPruébalo
autoCuando usamos este valor, el navegador calcula la altura original de la imagen o caja. Este es el valor predeterminado de esta propiedad.Pruébalo »
lengthDefine la altura en px, cm, em, rem, vh, etc.Pruébalo »
%Define la altura en porcentaje.
initialHace que la propiedad use su valor predeterminado.Pruébalo »
inheritHereda la propiedad de su elemento padre.

Práctica

Práctica

¿Cuáles son las configuraciones posibles para la propiedad height en CSS?