CSS: “display”: X no es un valor de “display”.

La propiedad CSS display controla cómo un elemento genera cajas en el diseño. Determina si un elemento se comporta como un elemento de nivel de bloque o de nivel en línea y define el modelo de diseño para sus hijos (ej., flow, flexbox, o grid). Dado que display es fundamental para el diseño de página, usar un valor inválido significa que el navegador ignorará completamente la declaración, potencialmente causando renderizado inesperado.

Las causas comunes de este error incluyen:

• Errores tipográficos — escribir dipslay: block, display: blok, o display: flx en lugar de las palabras clave correctas.
• Confundir valores de otras propiedades — usar valores como center, hidden, absolute, o relative, que pertenecen a propiedades como text-align, visibility, o position, no a display.
• Valores inventados o obsoletos — usar valores no estándar o deprecados que los navegadores no reconocen, como display: box (una sintaxis antigua de flexbox con prefijo sin el prefijo).
• Prefijos de proveedor faltantes — algunas sintaxis antiguas como -webkit-flex eran válidas en ciertos navegadores pero no son valores CSS estándar.

Los valores válidos para display incluyen: block, inline, inline-block, flex, inline-flex, grid, inline-grid, flow-root, none, contents, table, table-row, table-cell, table-caption, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, list-item, y la sintaxis de múltiples palabras clave como block flow, block flex, o inline grid.

Usar valores CSS inválidos es un problema porque los navegadores descartan silenciosamente las declaraciones que no entienden. Esto significa que tu diseño deseado no se aplicará, y la depuración puede ser difícil ya que no aparece ningún error visible en el navegador. Validar tu CSS detecta estos errores temprano.

Ejemplos

Inválido: error tipográfico en el valor display

<div style="display: flx;">
  <p>Este contenedor estaba destinado a ser un contenedor flex.</p>
</div>

Corregido: valor flex correcto

<div style="display: flex;">
  <p>Este contenedor ahora es un contenedor flex.</p>
</div>

Inválido: usar un valor de otra propiedad

<nav style="display: center;">
  <a href="/">Inicio</a>
</nav>

El valor center no pertenece a display. Si el objetivo es centrar contenido, usa un valor display válido combinado con propiedades de alineación apropiadas.

Corregido: usar flex con centrado

<nav style="display: flex; justify-content: center;">
  <a href="/">Inicio</a>
</nav>

Inválido: usar un valor position en lugar de un valor display

<div style="display: absolute;">
  <p>Contenido superpuesto</p>
</div>

Corregido: usar la propiedad correcta

<div style="position: absolute; display: block;">
  <p>Contenido superpuesto</p>
</div>

Inválido: usar un valor no estándar

<ul style="display: box;">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

Corregido: usar el valor flexbox estándar

<ul style="display: flex;">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
</ul>

Más información:

MDN Reference

MDN: CSS display property

→