Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La propiedad CSS display especifica el tipo de cuadro de representación utilizado para un elemento. En HTML,  los valores de propiedad  predeterminados display se toman de los comportamientos de los cambios en las especificaciones HTML o de la hoja de estilo predeterminada del navegador / usuario. El valor predeterminado en XML es inline.

Además de los Diferentes Tipos de caja de Visualizacion, el valor de nonepermite 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
Mediaall
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 typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

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 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 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 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 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  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 Estos elementos se comportan como elementos <rb>.
ruby-text  Estos elementos se comportan como elementos <rt>.
ruby-base-container  Estos elementos se comportan como elementos <rbc> generados como cajas anónimas.
ruby-text-container  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  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 acuerdo 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-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

where
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]?
<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-list-item | inline-table | inline-flex | inline-grid

Ejemplos

Ocultar Elementos

Contenido HTML

<p> Texto visible </ p>

Contenido CSS

  display: none;

Resultado

Ver El Ejemplo Vivo

Especificaciones

Especificación Estado Comentario
CSS Display Module Level 3
La definición de 'display' en esta especificación.
Unknown Agregado run-in, flow, flow-root, contents, y los valores de varias palabras clave.
CSS Ruby Layout Module Level 1
La definición de 'display' en esta especificación.
Working Draft Agregado ruby, ruby-base, ruby-text, ruby-base-container, y ruby-text-container.
CSS Grid Layout
La definición de 'display' en esta especificación.
Unknown Se agregaron los valores del modelo de cuadrícula.
CSS Flexible Box Layout Module
La definición de 'display' en esta especificación.
Candidate Recommendation Se agregaron los valores del modelo de caja flexible.
CSS Level 2 (Revision 1)
La definición de 'display' en esta especificación.
Recommendation Se agregaron los valores del modelo de tabla e inline-block.
CSS Level 1
La definición de 'display' en esta especificación.
Recommendation Definición inicial. Valores básicos: none, block, inline, y list-item.

Compatibilidad del navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Cromo Borde Firefox (Gecko) explorador de Internet Ópera Safari (WebKit)
none, inlineyblock 1.0 (Yes) 1.0 (1.7 o anterior) 4.0 7,0 1,0 (85)
inline-block 1.0 (Yes) 3.0 (1.9) 5,5 [4] 7,0 1,0 (85)
list-item 1.0 (Yes) 1.0 (1.7 o anterior) 6.0 7,0 1,0 (85)
run-in 1,0 [5] (Yes) Sin soporte 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 (Yes) 3.0 (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 (Yes) 1.0 (1.7 o anterior) 8,0 7,0 1,0 (85)
flex

21.0 - webkit

29,0

(Yes) 18.0 (18.0) [1]
20.0 (20.0)

10 - ms [8]
11

12,50

6.1 - webkit

9,0

inline-flex 21.0 - webkit (Yes) 18.0 (18.0) [1]
20.0 (20.0)
10 - ms [8]
11
12,50 6.1 - webkit
grid 57 (Yes) - ms 45.0 (45.0) [6] 10.0 - ms 44 TP
inline-grid 57 (Yes) - ms 45.0 (45.0) [6] 10.0 - ms 44 TP
subgrid ? Sin soporte ? Sin soporte ? ?
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container ? (Yes) 34.0 (34.0) [3] ? ? ?
contents 58 [7] Sin soporte 37 (37) [2] Sin soporte Sin soporte Sin soporte
flow-root 58 ? 53.0 (53.0) ? 45 ?
Característica Vista web de Android Chrome para Android Borde Firefox Mobile (Gecko) Teléfono IE Opera Mobile Safari Mobile
Soporte básico (Yes) (Yes) (Yes) ? ? (Yes) 7.0 - webkit
grid 57 57 ? ? ? 44 ?
inline-grid 57 57 ? ? ? 44 ?
flow-root 58 58 ? ? ? 45 ?

[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

Etiquetas y colaboradores del documento

Colaboradores en esta página: SphinxKnight, devCaso, FranciscoCastle
Última actualización por: SphinxKnight,