--- title: display slug: Web/CSS/display tags: - CSS - CSS Display - Propiedades CSS translation_of: Web/CSS/display ---
{{CSSRef}}

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;

{{cssinfo}}

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_inline}} 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_inline}} 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 {{cssxref("position")}}, {{cssxref("float")}} o {{cssxref("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_inline}} 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 {{HTMLElement ("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_inline}} 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_inline}} 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 {{HTMLElement ("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 {{HTMLElement ("tbody")}} Elementos HTML
table-header-group Estos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.
table-footer-group Estos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.
table-row Estos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.
table-cell Estos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.
table-column-group Estos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.
table-column Estos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.
table-caption Estos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.
ruby-base {{experimental_inline}} Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.
ruby-text {{experimental_inline}} Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.
ruby-base-container {{experimental_inline}} Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas.
ruby-text-container {{experimental_inline}} Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.
<display-box>
Estos valores se definen si un elemento genera cuadros de visualización en absoluto.
Valor Descripción
contents {{experimental_inline}} 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 {{cssxref("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 {{HTMLElement ("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

{{csssyntax}}

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

{{EmbedLiveSample ("Hide_element", 300, 60)}}

Ver El Ejemplo Vivo

Especificaciones

Especificación Estado Comentario
{{SpecName ('CSS3 Display', '# the-display-properties', 'display')}} {{Spec2 ('Pantalla CSS3')}} Agregado run-in, flow, flow-root, contents, y los valores de varias palabras clave.
{{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}} {{Spec2 ('CSS3 Ruby')}} Agregado ruby, ruby-base, ruby-text, ruby-base-container, y ruby-text-container.
{{SpecName ('CSS3 Grid', '# grid-containers', 'display')}} {{Spec2 ('Cuadrícula CSS3')}} Se agregaron los valores del modelo de cuadrícula.
{{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}} {{Spec2 ('CSS3 Flexbox')}} Se agregaron los valores del modelo de caja flexible.
{{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}} {{Spec2 ('CSS2.1')}} Se agregaron los valores del modelo de tabla e inline-block.
{{SpecName ('CSS1', '#display', 'display')}} {{Spec2 ('CSS1')}} Definición inicial. Valores básicos: none, block, inline, y list-item.

Compatibilidad del navegador

{{CompatibilityTable}}

Característica Cromo Borde Firefox (Gecko) explorador de Internet Ópera Safari (WebKit)
none, inlineyblock 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} 4.0 7,0 1,0 (85)
inline-block 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.9")}} 5,5 [4] 7,0 1,0 (85)
list-item 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} 6.0 7,0 1,0 (85)
run-in {{experimental_inline}} 1,0 [5] {{CompatVersionUnknown}} {{CompatNo}} 8,0 7,0 1,0 (85) [5]
4.0 Eliminado en 32 5.0 (532.5) Eliminado en 8.0
inline-table 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.9")}} 8,0 7,0 1,0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, Ytable-caption 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} 8,0 7,0 1,0 (85)
flex

21.0 {{property_prefix("- webkit")}}

29,0

 {{CompatVersionUnknown}} {{CompatGeckoDesktop("18.0")}} [1]
{{CompatGeckoDesktop("20.0")}}

10 {{property_prefix("- ms")}} [8]
11

 12,50

6.1 {{property_prefix("- webkit")}}

9,0
inline-flex 21.0 {{property_prefix("- webkit")}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("18.0")}} [1]
{{CompatGeckoDesktop("20.0")}}		 10 {{property_prefix("- ms")}} [8]
11		 12,50 6.1 {{property_prefix("- webkit")}}
grid {{experimental_inline}} {{CompatChrome(57)}} {{CompatVersionUnknown}} {{property_prefix("- ms")}} {{CompatGeckoDesktop("45.0")}} [6] 10.0 {{property_prefix("- ms")}} {{CompatOpera(44)}} TP
inline-grid {{experimental_inline}} {{CompatChrome(57)}} {{CompatVersionUnknown}} {{property_prefix("- ms")}} {{CompatGeckoDesktop("45.0")}} [6] 10.0 {{property_prefix("- ms")}} {{CompatOpera(44)}} TP
subgrid {{experimental_inline}} {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}}
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container {{Experimental_inline}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("34.0")}} [3] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
contents {{experimental_inline}} {{CompatChrome(58)}} [7] {{CompatNo}} {{CompatGeckoDesktop("37")}} [2] {{CompatNo}} {{CompatNo}} {{CompatNo}}
flow-root {{CompatChrome(58)}} {{CompatUnknown}} {{CompatGeckoDesktop("53.0")}} {{CompatUnknown}} {{CompatOpera(45)}} {{CompatUnknown}}
Característica Vista web de Android Chrome para Android Borde Firefox Mobile (Gecko) Teléfono IE Opera Mobile Safari Mobile
Soporte básico {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} 7.0 {{property_prefix("- webkit")}}
grid {{experimental_inline}} {{CompatChrome(57)}} {{CompatChrome(57)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatOperaMobile (44)}} {{CompatUnknown}}
inline-grid {{experimental_inline}} {{CompatChrome(57)}} {{CompatChrome(57)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatOperaMobile (44)}} {{CompatUnknown}}
flow-root {{CompatChrome(58)}} {{CompatChrome(58)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatOperaMobile (45)}} {{CompatUnknown}}

[1] Para activar el soporte de flexbox, para Firefox 18 y 19, el usuario tiene que cambiar la preferencia about: config "layout.css.flexbox.enabled" con true. Flexbox multilínea son compatibles desde Firefox 28.

[2] Antes de Firefox 37, el valor contents estaba deshabilitado de forma predeterminada, y podría habilitarse configurando el layout.css.display-contents.enabled con preferencia true. En Firefox 37, se habilitó de forma predeterminada, y en Firefox 53 el pref se eliminó por completo.

[3] CSS Ruby apoyo está detrás de pref "layout.css.ruby.enabled". El usuario tiene que cambiar este pref un verdadero para activarlo.

[4] Sólo elementos naturales en línea.

[5]No hay antes de los elementos en línea.

[6]El soporte de Grid CSS no está prefijado en las compilaciones Nightly / Alpha y detrás de pref "layout.css.grid.enabled" en las compilaciones Beta / Release.

[7] En Chrome, el valor contents está actualmente desactivado de forma predeterminada, pero se puede habilitar con el indicador "Experimental Plataforma Web características".

[8] En IE 10, sólo los valores prefijados especiales, -ms-flexboxy -ms-inline-flexbox, se reconocen.

Ver también