CSS
Explica cómo display define cajas y contextos de formato como block, inline, flow-root, flex, grid, table y contents.
display define el tipo de caja externa y el algoritmo de layout interno.
.container {
display: grid;
}Conceptualmente:
block flow
inline flow
block flex
block grid
inline flexLa sintaxis de dos valores permite expresarlo:
.badge {
display: inline flex;
}La sintaxis legacy equivalente es inline-flex.
Un block box participa en block flow y normalmente ocupa el inline size disponible.
Un inline box participa dentro de líneas. Width y height no controlan su caja como en block.
.badge {
display: inline-block;
}Participa inline, pero su interior se comporta como block container y acepta dimensionamiento.
.section {
display: flow-root;
}Crea un nuevo block formatting context. Contiene floats y evita ciertas interacciones de margin collapse con el exterior.
.toolbar { display: flex; }
.gallery { display: grid; }Los hijos directos se convierten en flex/grid items y dejan de comportarse exactamente como elementos normales de flow.
.wrapper {
display: contents;
}La caja del wrapper desaparece del layout y sus hijos participan como si fueran directos del padre.
Puede afectar accessibility tree, pseudo-elementos, backgrounds y event geometry según navegador. No lo uses solo para reparar markup sin probar.
[hidden] {
display: none;
}No genera caja y normalmente sale del árbol accesible. No es equivalente a visibility hidden u opacity 0.
.custom-list-item {
display: list-item;
}Display puede crear comportamiento de lista o tabla, pero no convierte automáticamente un div en semántica HTML equivalente.
Un contexto determina cómo interactúan las cajas:
Crear uno puede cambiar floats, margins, overflow y containing blocks.
¿Por qué display: contents no equivale a eliminar el elemento del DOM?
Porque el nodo y sus atributos continúan existiendo; lo que se elimina es su caja principal dentro del layout.
Flujo normal y margin collapse explica la distribución predeterminada.