Enciclopedia CSS:display

Plantilla:Programación Comprender la propiedad CSS display puede ser complicado debido a la gran cantidad de valores posibles, cada uno de los cuales afecta al comportamiento y la visualización de un elemento. Esta propiedad determina cómo se comporta un elemento en el documento: si será un bloque, en línea, flexible, en cuadrícula o completamente invisible.

Lista de valores disponibles para la propiedad display

Aquí tienes una lista de los valores disponibles para la propiedad display:

• display: -webkit-box — valor obsoleto para crear una disposición de bloque en los navegadores Webkit.
• display: -webkit-inline-box — valor similar a -webkit-box, pero para una disposición en línea en los navegadores Webkit.
• display: block — el elemento se convierte en un bloque, ocupando todo el ancho de su contenedor.
• display: contents — el elemento desaparece, pero sus elementos hijos permanecen en el DOM.
• display: flex — el elemento se convierte en un contenedor de disposición flexible (Flexbox).
• display: flow — define el comportamiento de flujo predeterminado (valor principal para la mayoría de los elementos).
• display: flow-root — crea un nuevo contexto de formato de bloque, como si el elemento fuera un contenedor de bloque.
• display: grid — el elemento se convierte en un contenedor de disposición en cuadrícula (Grid).
• display: inherit — el elemento hereda el valor de la propiedad display de su contenedor.
• display: initial — restablece la propiedad display a su valor inicial.
• display: inline — el elemento se convierte en línea, ocupando solo el ancho necesario.
• display: inline-block — el elemento combina el comportamiento de línea y de bloque (puede tener tamaño, pero sigue estando en la misma línea).
• display: inline-flex — el elemento se convierte en un contenedor Flexbox en línea.
• display: inline-grid — el elemento se convierte en un contenedor Grid en línea.
• display: inline-masonry — valor experimental para un diseño en cuadrícula en línea con disposición dinámica.
• display: inline-table — el elemento se comporta como una tabla en línea.
• display: list-item — el elemento se convierte en un elemento de lista con marcador (como en <li>).
• display: masonry — valor experimental para una cuadrícula con diseño dinámico.
• display: math — valor experimental para diseño matemático.
• display: none — el elemento se oculta y no ocupa espacio en el documento.
• display: revert — restablece la propiedad display a los estilos predeterminados del navegador.
• display: revert-layer — valor experimental para restablecer los estilos en capas específicas.
• display: ruby — el elemento se comporta como un contenedor para anotaciones Ruby (usado en idiomas que requieren Furigana).
• display: ruby-text — el elemento se comporta como el texto Ruby (Furigana).
• display: table — el elemento se comporta como una tabla de bloque.
• display: table-caption — el elemento se comporta como un pie de tabla.
• display: table-cell — el elemento se comporta como una celda de tabla.
• display: table-column — el elemento se comporta como una columna de tabla.
• display: table-column-group — el elemento se comporta como un grupo de columnas de tabla.
• display: table-footer-group — el elemento se comporta como un grupo de filas de pie de tabla.
• display: table-header-group — el elemento se comporta como un grupo de filas de encabezado de tabla.
• display: table-row — el elemento se comporta como una fila de tabla.
• display: table-row-group — el elemento se comporta como un grupo de filas de tabla.
• display: unset — elimina el valor establecido y restablece la propiedad a su estado inicial o heredado.

Cada uno de estos valores tiene un propósito específico que permite controlar de manera flexible el diseño de una página web. Sin embargo, debido a la gran variedad de valores, puede ser difícil elegir el adecuado, y una elección incorrecta puede dar lugar a resultados inesperados.

En artículos separados, analizaremos en detalle cada valor de la propiedad display, aprenderemos cuándo y cómo utilizarlos y revisaremos su compatibilidad con los navegadores.