Validación HTML: CSS: "height": Demasiados valores o valores no reconocidos.

Acerca de este problema de CSS

El validador W3C comprueba estilos en línea y hojas de estilo integradas para CSS válido. Cuando encuentra una declaración height con múltiples valores o un valor no reconocido, marca el error porque height no es una propiedad abreviada: solo acepta un valor a la vez. Esto difiere de propiedades como margin o padding, que aceptan múltiples valores para dirigirse a diferentes lados de un elemento.

Este error ocurre comúnmente cuando:

Proporcionas accidentalmente dos valores, quizás confundiendo height con una propiedad abreviada (ej., height: 100px 50px;).
Incluyes un error tipográfico o unidad inválida (ej., height: 100ppx; o height: 100pixels;).
Usas una función CSS incorrectamente (ej., height: calc(100% 20px); — falta el operador).
Copias un valor destinado a otra propiedad, como pegar un valor de grid-template-rows en height.

Los navegadores pueden ignorar silenciosamente declaraciones height inválidas, causando que tu elemento recurra a su dimensionamiento predeterminado (auto). Esto puede llevar a comportamientos de diseño inesperados que son difíciles de depurar. Mantener tu CSS válido asegura renderizado consistente entre navegadores y ayuda a detectar errores temprano.

Valores válidos para `height`

La propiedad height acepta exactamente uno de los siguientes:

Valores de longitud: 100px, 10em, 5rem, 20vh, etc.
Valores de porcentaje: 50%, 100%
Valores de palabra clave: auto, max-content, min-content, fit-content(200px)
Valores globales: inherit, initial, revert, unset
Expresiones calc: calc(100% - 20px), calc(50vh + 2rem)

Ejemplos

Incorrecto: demasiados valores

<style>
  .box {
    height: 100px 50px; /* Error: height solo acepta un valor */
  }
</style>
<div class="box">Contenido</div>

Incorrecto: valor no reconocido

<style>
  .box {
    height: 100pixels; /* Error: "pixels" no es una unidad válida */
  }
</style>
<div class="box">Contenido</div>

Incorrecto: expresión `calc()` malformada

<style>
  .box {
    height: calc(100% 20px); /* Error: falta operador entre valores */
  }
</style>
<div class="box">Contenido</div>

Correcto: valor de longitud único

<style>
  .box {
    height: 100px;
  }
</style>
<div class="box">Contenido</div>

Correcto: valor de porcentaje

<style>
  .box {
    height: 50%;
  }
</style>
<div class="box">Contenido</div>

Correcto: `calc()` con operador apropiado

<style>
  .box {
    height: calc(100% - 20px);
  }
</style>
<div class="box">Contenido</div>

Correcto: valor de palabra clave

<style>
  .box {
    height: auto;
  }
</style>
<div class="box">Contenido</div>

Si necesitas establecer tanto width como height, recuerda que son propiedades separadas y deben declararse individualmente. Si estabas intentando establecer una altura mínima y máxima, usa min-height y max-height como declaraciones distintas en lugar de combinar valores en una sola propiedad height.