Característica del CSS Display

por
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 inicialinline
Aplicado aTodos los artículos
heredableNo
AnimableNo
Valor calculadoComo 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: block;
display: inline;
display: run-in;
/*  */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
/*  +  */
display: block flow;
display: inline table;
/*  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: 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: contents;
display: none;
/*  */
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:

 linea de texto prueba 1  linea de texto prueba 3

Código CSS:

.display-none{ 
  display:  none; 
}

Ejemplo de uso del valor inline en el elemento 

el cual es un elemento de bloque:

 linea de texto prueba 1  linea de texto prueba 2
   linea de texto prueba 3

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 :

 linea de texto prueba 1 
  linea de texto prueba 2 linea de texto prueba 3

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:

 linea de texto prueba 1 
  linea de texto prueba 2  linea de texto prueba 3

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ísticaChromoFirefoxInternet ExplorerÓperaSafari
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.

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.

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

PropiedadFunción
blockEl elemento generará una caja de elemento de bloque.
inlineEl elemento generará uno o más cuadros de elementos en línea.

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:

PropiedadFunción
flowEl elemento formateará su contenido utilizando un diseño de flujo (bloque y en línea).
flow-rootEl elemento generará un bloque para un elemento de bloque y creará un nuevo contexto de formato de bloque.
tableEste elemento se comportará como elementos  en HTML. Define una caja de bloques.
flexEste elemento se comportará como elementos de bloque y formateará su contenido usando el modelo flexbox.
gridEste elemento se comportará como elementos de bloque y formateará su contenido usando una forma de cuadrícula.

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 , el tipo de visualización del contenido interno del elemento es flow, si no se especifica , el tipo de visualización del cuadro exterior del elemento es block.

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:

en HTML. en HTML. en HTML. en HTML. en HTML. en HTML.
PropiedadFunción
table-row-groupTendrá un comportamiento igual que los elementos 
table-header-groupTendrá un comportamiento igual que los elementos 
table-footer-groupTendrá un comportamiento igual que los elementos 
table-rowTendrá un comportamiento igual que los elementos 
table-cellLos elementos se comportarán igual que los elementos  en HTML.
table-column-groupLos elementos se comportarán igual que los elementos 
table-columnLos elementos se comportarán igual que los elementos 
table-captionLos elementos se comportarán igual que los elementos 
 en HTML.

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.

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:

PropiedadFunción
inline-blockEste 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-tableEl valor inline-table no tiene equivalente directo en HTML, se comporta como tablas  en HTML pero en cuadros en línea, en lugar de usar cuadros de bloque. Este valor es equivalente a usar inline table.
inline-flexEl 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-gridEl 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 :  [    ||    ]  |    |  
               |    |  ;
© 2026 BigCode