display

La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible).

Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en flow layout; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de display estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando display: flex es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. Vea la siguientes tablas para mas especificaciones individuales.

Además de los Diferentes Tipos de caja de Visualizacion, el valor de none permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza none, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.

/ * Valores <display-outside> * /

display: block;
display: inline;
display: run-in;

/ * Valores <display-inside> * /
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/ * Valores <display-outside> más valores <display-inside> * /
display: block flow;
display: inline table;
display: flex run-in;

/ * Valores <display-listitem> * /
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;

/ * Valores <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: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/ * Valores <display-box> * /
display: contents;
display: none;

/ * Valores <display-legacy> * /
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/ * Valores globales * /
display: heredar;
display: initial;
display: unset;
Valor inicialinline
Applies toall elements
Heredableno
Valor calculadoas the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified.
Animation typeNot animatable

Sintaxis

La propiedad display se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:

En la actualidad, es mejor especificar display utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.

Valores

<display-outside>

Estas palabras clave especifican el tipo de pantalla externa del elemento, que es esencialmente su función en el diseño de flujo: A continuación se definen:

Valor Descripción
block El elemento genera un cuadro de elemento de bloque.
inline El elemento genera uno o más cuadros de elemento en línea.
run-in Experimental El elemento genera un cuadro de ejecución. Los elementos de ejecución actúan como líneas o bloques, dependiendo de los elementos circundantes. Es decir: Si el cuadro de ejecución contiene un cuadro de bloque, igual que el bloque. Si un cuadro de bloque sigue el cuadro de ejecución, el cuadro de ejecución se convierte en el primer cuadro en línea del cuadro de bloque. Si sigue un cuadro en línea, el cuadro de ejecución se convierte en un cuadro de bloque.
<display-inside>

Estas palabras clave especifican el tipo de pantalla interna del elemento, que define el tipo de contexto de formato que establece su contenido (suponiendo que es un elemento no reemplazado). Se definen como sigue:

Valor Descripción
flow Experimental El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea).Si su tipo de pantalla externa es inline o run-in, y está participando en un contexto de formato de bloque o en línea, entonces genera un cuadro en línea. De lo contrario genera una caja de contenedor de bloques.Dependiendo del valor de otras propiedades (como position, float o overflow en un contexto de formato en bloque o en línea, establece un nuevo contexto de formato de bloque para su contenido o integra su contenido en su contexto de formato padre.
flow-root Experimental El elemento genera un cuadro de elemento de bloque que establece un nuevo contexto de formato de bloque .
table Estos elementos se comportan como elementos HTML <table>. Define un cuadro de nivel de bloque.
flex El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de flexbox .
grid El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.
subgrid Experimental Si el elemento padre tiene display:grid, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.
ruby Experimental El elemento se comporta como un elemento en línea y establece su contenido de acuerdo con el modelo de formato ruby. Se comporta como los elementos HTML <ruby> (en-US) correspondientes.
<display-listitem>

El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.

Si no se especifica ningún valor <display-inside>, el tipo de pantalla interna de la caja principal es el predeterminado flow. Si no se especifica ningún valor <display-outside>, el tipo de pantalla externa de la caja principal tiene el valor predeterminado block.

<display-internal>

Algunos modelos de disposición, como table y ruby, tienen una estructura interna completa, con varios papeles diferentes que sus hijos y descendientes pueden llenar. Esta sección define los valores de visualización "internos", que sólo tienen significado dentro de ese modo de disposición particular.

A menos que se especifique lo contrario, el tipo de visualización interno y el tipo de visualización exterior de los elementos que utilizan estos valores de visualización se establecen en la palabra clave dada.

Valor Descripción
table-row-group Estos elementos se comportan como <tbody> (en-US) Elementos HTML
table-header-group Estos elementos se comportan como elementos HTML de <thead> (en-US).
table-footer-group Estos elementos se comportan como elementos HTML <tfoot> (en-US).
table-row Estos elementos se comportan como elementos HTML <tr>.
table-cell Estos elementos se comportan como elementos HTML de <td>.
table-column-group Estos elementos se comportan como elementos HTML <colgroup>.
table-column Estos elementos se comportan como elementos HTML <col>.
table-caption Estos elementos se comportan como elementos HTML de <caption>.
ruby-base Experimental Estos elementos se comportan como elementos <rb> (en-US).
ruby-text Experimental Estos elementos se comportan como elementos <rt> (en-US).
ruby-base-container Experimental Estos elementos se comportan como elementos <rbc> generados como cajas anónimas.
ruby-text-container Experimental Estos elementos se comportan como elementos <rtc> (en-US).
<display-box>

Estos valores se definen si un elemento genera cuadros de visualización en absoluto.

Valor Descripción
contents Experimental Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.
none Desaparece la visualización de un elemento para que no tenga ningún efecto en el diseño (el documento se representa como si el elemento no existiera). Todos los elementos descendentes también tienen su pantalla apagada.Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad visibility.
<display-legacy>

CSS 2 usó una sintaxis de palabra clave única para la propiedad display, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue:

Valor Descripción
inline-block El elemento genera una caja de elemento de bloque que fluye con el contenido circundante como si fuera una sola caja en línea (comportándose como un elemento reemplazado)Es equivalente a inline flow-root.
inline-table El valor inline-table no tiene una asignación directa en HTML. Se comporta como un elemento HTML <tabla>, pero como un cuadro en línea, en el lugar de un cuadro a nivel de bloque. Dentro del cuadro de la tabla hay un contexto de nivel de bloque.Es equivalente a inline table.
inline-flex El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.Es equivalente a inline flex.
inline-grid El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.

Sintaxis formal

display = 
[ <display-outside> || <display-inside> ] |
<display-listitem> |
<display-internal> |
<display-box> |
<display-legacy> |
<display-outside> || [ <display-inside> | math ]

<display-outside> =
block |
inline |
run-in

<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby

<display-listitem> =
<display-outside>? &&
[ flow | flow-root ]? &&
list-item

<display-internal> =
table-row-group |
table-header-group |
table-footer-group |
table-row |
table-cell |
table-column-group |
table-column |
table-caption |
ruby-base |
ruby-text |
ruby-base-container |
ruby-text-container

<display-box> =
contents |
none

<display-legacy> =
inline-block |
inline-table |
inline-flex |
inline-grid

Sobre Accesibilidad

display: none;

Al utilizar un valor de none en la propiedad display el elemento se elimina del árbol de accesibilidad. El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.

Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar un método alternativo con una combinación de propiedades de CSS.

display: contents;

Los navegadores eliminarán el atributo predeterminado de role de cualquier elemento con una propiedad display que tenga un valor de contents del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.

Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos

Tablas

Al trabajar con una tabla, si la propiedad display cambia al valor de block, grid o flex se altera la representación de ese elemento en el árbol de accessibilidad. Esto causará que el elemento ya no será anunciado como una tabla.

Para más información por favor referirse a los siguientes artículos:

Ejemplos

Ocultar Elementos

Contenido HTML

<p> Texto visible </ p>

Contenido CSS

  display: none;

Resultado

Especificaciones

Specification
CSS Display Module Level 3
# the-display-properties

Compatibilidad del navegador

BCD tables only load in the browser

Ver también