display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css

/ * 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 inicial	`inline`
Applies to	all elements
Heredable	no
Valor calculado	as 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 type	Discrete behavior except when animating to or from `none` is visible for the entire duration

Sintaxis

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

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

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>` 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>` Elementos HTML
`table-header-group`	Estos elementos se comportan como elementos HTML de `<thead>`.
`table-footer-group`	Estos elementos se comportan como elementos HTML `<tfoot>`.
`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>`.
`ruby-text` Experimental	Estos elementos se comportan como elementos `<rt>`.
`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>`.

<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

Contenido HTML

html

<p>Texto visible</p>

Contenido CSS

css

display: none;

Resultado

Ver El Ejemplo Vivo

Especificaciones

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

Compatibilidad con navegadores

BCD tables only load in the browser