Atributo CSS display

Definición y uso

El atributo display especifica el tipo de cuadro que debe generar el elemento.

Descripción

Esta propiedad se utiliza para definir el tipo de cuadro de visualización generado por el elemento durante la creación del diseño. Para tipos de documentos como HTML, si se utiliza display sin precaución puede ser peligroso, ya que puede violar la jerarquía de visualización ya definida en HTML. Para XML, ya que XML no tiene esta jerarquía interna, todos los display son absolutamente necesarios.

Notas:En CSS2 hay valores compact y marker, pero debido a la falta de soporte general, se han eliminado de CSS2.1.

Véase también:

Tutoriales CSS:Posicionamiento CSS

Manual de referencia de HTML DOM:Atributo display

Ejemplo

Hacer que el párrafo genere un cuadro en línea:

p.inline
  {
  display:inline;
  }

Prueba tú mismo

Sintaxis de CSS

display: value;

Valor de atributo

Valor Descripción
none Este elemento no se mostrará.
block Este elemento se mostrará como un elemento de bloque, con saltos de línea antes y después del elemento.
inline Por defecto. Este elemento se mostrará como un elemento en línea, sin saltos de línea antes ni después del elemento.
inline-block Elemento en línea de bloque. (Valor añadido en CSS2.1)
list-item Este elemento se mostrará como una lista.
run-in Este elemento se mostrará como un elemento de bloque o en línea según el contexto.
compact En CSS hay un valor compacto, pero debido a la falta de soporte general, se ha eliminado de CSS2.1.
marker En CSS hay un valor llamado marker, pero debido a una falta de soporte generalizado, se ha eliminado de CSS2.1.
table Este elemento se mostrará como una tabla de bloque (similar a <table>), con saltos de línea antes y después de la tabla.
inline-table Este elemento se mostrará como una tabla en línea (similar a <table>), sin saltos de línea antes y después de la tabla.
table-row-group Este elemento se mostrará como un grupo de una o más filas (similar a <tbody>).
table-header-group Este elemento se mostrará como un grupo de una o más filas (similar a <thead>).
table-footer-group Este elemento se mostrará como un grupo de una o más filas (similar a <tfoot>).
table-row Este elemento se mostrará como una fila de tabla (similar a <tr>).
table-column-group Este elemento se mostrará como un grupo de una o más columnas (similar a <colgroup>).
table-column Este elemento se mostrará como una columna de celda (similar a <col>)
table-cell Este elemento se mostrará como una celda de tabla (similar a <td> y <th>)
table-caption Este elemento se mostrará como un título de tabla (similar a <caption>)
inherit Se debe especificar que el valor de la propiedad display debe ser heredado del elemento padre.

Detalles técnicos

Valor por defecto: inline
Herencia: no
Versión: CSS1
Sintaxis de JavaScript: object.style.display="inline"

Ejemplo TIY

Cómo mostrar un elemento como un elemento en línea
Este ejemplo muestra cómo mostrar un elemento como un elemento en línea.
Cómo mostrar un elemento como un elemento de bloque
Este ejemplo muestra cómo mostrar un elemento como un elemento de bloque.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Notas:Si se especifica !DOCTYPE, Internet Explorer 8 (y versiones posteriores) admiten los valores de atributo "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" y "inherit".