Cada elemento de una página web es una caja rectangular. La propiedad display en CSS determina cómo se comporta esa caja rectangular. Sólo hay un puñado de valores que se utilizan habitualmente:
div { display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like <div> and <section> block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */}El valor por defecto para todos los elementos es inline. La mayoría de las «User Agent Stylesheets» (los estilos por defecto que el navegador aplica a todos los sitios) reajustan muchos elementos a «block». Repasemos cada uno de ellos, y luego cubramos algunos de los otros valores menos comunes.
Inline
El valor por defecto para los elementos. Piensa en elementos como <span><em>, o <b> y cómo al envolver el texto en esos elementos dentro de una cadena de texto no se rompe el flujo del mismo.
El elemento
<em> tiene un borde rojo de 1px. Fíjate en que está en línea con el resto del texto.Un elemento en línea aceptará margen y relleno, pero el elemento sigue estando en línea como cabría esperar. El margen y el relleno sólo empujarán a otros elementos horizontalmente, no verticalmente.
Un elemento en línea no aceptará height y width. Simplemente los ignorará.
Bloque en línea
Un elemento configurado como inline-block es muy similar a inline en el sentido de que se pondrá en línea con el flujo natural del texto (en la «línea de base»). La diferencia es que puedes poner un width y height que se respetará.
Bloque
Una serie de elementos son establecidos como block por la hoja de estilos UA del navegador. Suelen ser elementos contenedores, como <div><section>, y <ul>. También «bloques» de texto como <p> y <h1>. Los elementos a nivel de bloque no se sitúan en línea, sino que rompen con ellos. Por defecto (sin establecer un ancho) ocupan todo el espacio horizontal que pueden.
<p>s que son elementos de nivel de bloque. El elemento <em> que hay entre ellos no se encuentra en línea porque los bloques se rompen por debajo de los elementos en línea.Run-in
En primer lugar, esta propiedad no funciona en Firefox. Se dice que la especificación de la misma no está lo suficientemente bien definida. Sin embargo, para empezar a entenderlo, es como si quisieras que un elemento de cabecera estuviera en línea con el texto que hay debajo. Flotarlo no funcionará y tampoco nada más, ya que no quieres que el encabezado sea un hijo del elemento de texto que está debajo, quieres que sea su propio elemento independiente. En los navegadores «compatibles» es así:
Flexbox
La propiedad display también se utiliza para los nuevos métodos de diseño como Flexbox.
.header { display: flex;}Hay algunas versiones antiguas de la sintaxis de flexbox, así que consulta este artículo para la sintaxis en el uso de flexbox con el mejor soporte de los navegadores. Asegúrese de ver esta guía completa de Flexbox.
Flow-Root
El valor de visualización flow-root crea un nuevo «contexto de formato de bloque», pero por lo demás es como block. Un nuevo BFC ayuda con cosas como la limpieza de flotadores, eliminando la necesidad de hacks para hacer eso.
.group { display: flow-root;}Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador soporta la característica en esa versión en adelante.
Escritorio
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 58 | 53 | No | 79 | 13 |
Móviles / Tabletas
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 89 | 86 | 89 | 13.0-13,1 |
Diseño de la cuadrícula
El diseño de la cuadrícula también se establecerá inicialmente mediante la propiedad display.
body { display: grid;}Aquí tienes nuestra guía sobre el diseño de Grid, que incluye una tabla de compatibilidad con los navegadores.
None
Elimina el elemento de la página. Tenga en cuenta que mientras el elemento sigue en el DOM, se elimina visualmente y de cualquier otra manera concebible (no se puede tabular a él o a sus hijos, es ignorado por los lectores de pantalla, etc).
Valores de tabla
Hay todo un conjunto de valores de visualización que obligan a los elementos que no son de tabla a comportarse como elementos de tabla, si necesita que eso ocurra. Es poco frecuente, pero a veces te permite ser «más semántico» con tu código mientras utilizas los poderes de posicionamiento únicos de las tablas.
div { display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption;}Para usarlo, sólo tienes que imitar la estructura normal de una tabla. Ejemplo simple:
<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> Gross but sometimes useful. </div> </div></div>