Característica del CSS Display

La propiedad display CSS define qué tipo de cuadro de visualización se utilizará con el elemento. El valor de la propiedad display en HTML se toma de la especificación HTML o de la hoja de estilo predeterminada en el navegador o del usuario, y el valor predeterminado para ella en XML es inline.

Funciones y aplicaciones del CSS display

Valor inicial	`inline`
Aplicado a	Todos los artículos
heredable	No
Animable	No
Valor calculado	Como se especifica, excepto para elementos posicionados, elementos flotantes y elemento raíz, el valor calculado puede ser igual a una palabra reservada que difiere del valor especificado

Además de los posibles tipos de visualización, el valor nos permitirá none no renderizar el elemento por completo, incluidos todos sus elementos secundarios, y la página se renderiza como si el elemento no estuviera en el árbol del documento.

/* <display-outside> */
display: block;
display: inline;
display: run-in;
/* <display-inside> */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
/* <display-outside> + <display-inside> */
display: block flow;
display: inline table;
/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;
/* <display-internal> */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
/* <display-box> */
display: contents;
display: none;
/* <display-legacy> */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

display: inherit;
display: initial;
display: unset;

Ejemplos del uso CSS display

Ejemplo de uso de la palabra reservada none para eliminar el elemento  de la página mostrada:

<div> linea de texto prueba 1 <span  class = "display-none"> linea de texto prueba 2
  </span> linea de texto prueba 3 </div>

Código CSS:

.display-none{ 
  display:  none; 
}

Ejemplo de uso del valor inline en el elemento  el cual es un elemento de bloque:

<div> linea de texto prueba 1 <span  class = "display-inline"> linea de texto prueba 2
  </span> linea de texto prueba 3 </div>

Código CSS:

.display-inline{ 
  display:  inline; 
}

Observe cómo los atributos dos width y height (y otros) no tienen ningún efecto sobre el elemento anterior. A continuación, se muestra un ejemplo del uso del valor block en un elemento en línea, como el elemento :

<div> linea de texto prueba 1 <span  class = "display-block">
  linea de texto prueba 2</span> linea de texto prueba 3 </div>

Código CSS:

.display-block{ 
  display:  block; 
}

El siguiente ejemplo usa el valor inline-block, y lo aplicaremos al elemento  con valores para las propiedades width, height y padding:

<div> linea de texto prueba 1 <span  class = "display-inline-block">
  linea de texto prueba 2 </span> linea de texto prueba 3 </div>

Código CSS:

.display-block{ 
  display:  inline-block ; 
  width:  100 px; 
  height:  2 cm; 
  padding:  0  1em  0; 
}

Soporte del CSS display por los navegadores

Característica	Chromo	Firefox	Internet Explorer	Ópera	Safari
Soporte básico	1.0	1.0	8.0	7.0	1.0
flex y inline-flex	29,0	20,0	11	12,5	9.0
grid y grid-inline	57	45,0	10.0 con el anterior `-ms-`	44	T
flow-root	58	53,0	?	45	?

Funcionamiento general del CSS display

La propiedad se especifica displaymediante palabras reservadas y estas palabras reservadas se dividen en seis categorías.

<display-outside>
<display-inside>
<display-listitem>
<display-internal>
<display-box>
<display-legacy>

Actualmente se recomienda especificar la propiedad display usando una sola palabra reservada, aunque las especificaciones modernas nos permiten usar más de una palabra reservada a la vez, pero esto no está bien soportado en los navegadores.

`<display-outside>`

Estas palabras reservadas especifican el tipo de pantalla exterior, lo que significa que el elemento tiene un elemento de flujo:

Propiedad	Función
`block`	El elemento generará una caja de elemento de bloque.
`inline`	El elemento generará uno o más cuadros de elementos en línea.

`<display-inside>`

Estas palabras reservadas definen el tipo de visualización del elemento interno, lo que significa definir el tipo de formato que se aplicará al contenido del elemento:

Propiedad	Función
`flow`	El elemento formateará su contenido utilizando un diseño de flujo (bloque y en línea).
`flow-root`	El elemento generará un bloque para un elemento de bloque y creará un nuevo contexto de formato de bloque.
`table`	Este elemento se comportará como elementos `<table>` en HTML. Define una caja de bloques.
`flex`	Este elemento se comportará como elementos de bloque y formateará su contenido usando el modelo flexbox.
`grid`	Este elemento se comportará como elementos de bloque y formateará su contenido usando una forma de cuadrícula.

`<display-listitem>`

El elemento generará un cuadro de bloque para su contenido y un contenedor en línea para cada elemento de la lista.

Si no se especifica <display-inside>, el tipo de visualización del contenido interno del elemento es flow, si no se especifica <display-outside>, el tipo de visualización del cuadro exterior del elemento es block.

`<display-internal>`

El estilo de disposición de table tiene una estructura interna compleja con varios roles que pueden desempeñar los child del elemento. Estos valores definen sólo los valores internos, que tienen significado sólo en el estilo de diseño de la tabla.

El estilo de la visualización exterior e interior de los elementos se establecerá en el valor de palabra reservado especificado a menos que se establezca lo contrario:

Propiedad	Función
`table-row-group`	Tendrá un comportamiento igual que los elementos `<tbody>` en HTML.
`table-header-group`	Tendrá un comportamiento igual que los elementos `<thead>` en HTML.
`table-footer-group`	Tendrá un comportamiento igual que los elementos `<tfoot>` en HTML.
`table-row`	Tendrá un comportamiento igual que los elementos `<tr>` en HTML.
`table-cell`	Los elementos se comportarán igual que los elementos `<td>` en HTML.
`table-column-group`	Los elementos se comportarán igual que los elementos `<colgroup>` en HTML.
`table-column`	Los elementos se comportarán igual que los elementos `<col>` en HTML.
`table-caption`	Los elementos se comportarán igual que los elementos `<caption>` en HTML.

`<display-box>`

Este valor determina si el objeto generará un box o no.

La palabra reservada none hace que el elemento no se represente por completo, incluidos todos sus elementos secundarios, y la página se procesará como si el elemento no estuviera en el tree del documento.

Si desea que el elemento ocupe el espacio que normalmente ocupa pero no muestre nada, use la propiedad en visibility lugar de display.

`<display-legacy>`

El CSS 2 usó solo una palabra reservada para describir la propiedad display, lo que significa que se necesitan palabras reservadas separadas para combinar más de un tipo de visualización de elementos en el mismo modelo de diseño:

Propiedad	Función
`inline-block`	Este elemento generará un cuadro de elemento de bloque que se mezclará con el contenido circundante como si fuera un cuadro en línea. Este valor es equivalente a usar `inline flow-root`.
`inline-table`	El valor `inline-table` no tiene equivalente directo en HTML, se comporta como tablas `<table>` en HTML pero en cuadros en línea, en lugar de usar cuadros de bloque. Este valor es equivalente a usar `inline table`.
`inline-flex`	El elemento se comportará como un elemento en línea pero formateará su contenido de acuerdo con un modelo flexbox. Este valor es equivalente a usar `inline flex`.
`inline-grid`	El elemento se comportará como un elemento en línea pero formateará su contenido en forma de cuadrícula.

Estructura de uso del CSS display

display :  [  <display-outside>  ||  <display-inside>  ]  |  <display-listitem>  |  
             <display-internal>  |  <display-box>  |  <display-legacy>;