
La propiedad display CSS define qué tipo de cuadro de visualización se utilizará con el elemento. El valor de la propiedad display
en HTML se toma de la especificación HTML o de la hoja de estilo predeterminada en el navegador o del usuario, y el valor predeterminado para ella en XML es inline
.
Funciones y aplicaciones del CSS display
Valor inicial | inline |
---|---|
Aplicado a | Todos los artículos |
heredable | No |
Animable | No |
Valor calculado | Como se especifica, excepto para elementos posicionados, elementos flotantes y elemento raíz, el valor calculado puede ser igual a una palabra reservada que difiere del valor especificado |
Además de los posibles tipos de visualización, el valor nos permitirá none
no renderizar el elemento por completo, incluidos todos sus elementos secundarios, y la página se renderiza como si el elemento no estuviera en el árbol del documento.
/* <display-outside> */ display: block; display: inline; display: run-in; /* <display-inside> */ display: flow; display: flow-root; display: table; display: flex; display: grid; /* <display-outside> + <display-inside> */ display: block flow; display: inline table; /* <display-listitem> values */ 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; /* <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-box> */ display: contents; display: none; /* <display-legacy> */ display: inline-block; display: inline-table; display: inline-flex; display: inline-grid; display: inherit; display: initial; display: unset;
Ejemplos del uso CSS display
Ejemplo de uso de la palabra reservada none
para eliminar el elemento <span>
de la página mostrada:
<div> linea de texto prueba 1 <span class = "display-none"> linea de texto prueba 2 </span> linea de texto prueba 3 </div>
Código CSS:
.display-none{ display: none; }
Ejemplo de uso del valor inline
en el elemento <p>
el cual es un elemento de bloque:
<div> linea de texto prueba 1 <span class = "display-inline"> linea de texto prueba 2 </span> linea de texto prueba 3 </div>
Código CSS:
.display-inline{ display: inline; }
Observe cómo los atributos dos width
y height
(y otros) no tienen ningún efecto sobre el elemento <p>
anterior. A continuación, se muestra un ejemplo del uso del valor block
en un elemento en línea, como el elemento <b>
:
<div> linea de texto prueba 1 <span class = "display-block"> linea de texto prueba 2</span> linea de texto prueba 3 </div>
Código CSS:
.display-block{ display: block; }
El siguiente ejemplo usa el valor inline-block
, y lo aplicaremos al elemento <p>
con valores para las propiedades width
, height
y padding
:
<div> linea de texto prueba 1 <span class = "display-inline-block"> linea de texto prueba 2 </span> linea de texto prueba 3 </div>
Código CSS:
.display-block{ display: inline-block ; width: 100 px; height: 2 cm; padding: 0 1em 0; }
Soporte del CSS display por los navegadores
Característica | Chromo | Firefox | Internet Explorer | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 8.0 | 7.0 | 1.0 |
flex y inline-flex | 29,0 | 20,0 | 11 | 12,5 | 9.0 |
grid y grid-inline | 57 | 45,0 | 10.0 con el anterior -ms- | 44 | T |
flow-root | 58 | 53,0 | ? | 45 | ? |
Funcionamiento general del CSS display
La propiedad se especifica display
mediante palabras reservadas y estas palabras reservadas se dividen en seis categorías.
<display-outside>
<display-inside>
<display-listitem>
<display-internal>
<display-box>
<display-legacy>
Actualmente se recomienda especificar la propiedad display
usando una sola palabra reservada, aunque las especificaciones modernas nos permiten usar más de una palabra reservada a la vez, pero esto no está bien soportado en los navegadores.
<display-outside>
Estas palabras reservadas especifican el tipo de pantalla exterior, lo que significa que el elemento tiene un elemento de flujo:
Propiedad | Función |
---|---|
block | El elemento generará una caja de elemento de bloque. |
inline | El elemento generará uno o más cuadros de elementos en línea. |
<display-inside>
Estas palabras reservadas definen el tipo de visualización del elemento interno, lo que significa definir el tipo de formato que se aplicará al contenido del elemento:
Propiedad | Función |
---|---|
flow | El elemento formateará su contenido utilizando un diseño de flujo (bloque y en línea). |
flow-root | El elemento generará un bloque para un elemento de bloque y creará un nuevo contexto de formato de bloque. |
table | Este elemento se comportará como elementos <table> en HTML. Define una caja de bloques. |
flex | Este elemento se comportará como elementos de bloque y formateará su contenido usando el modelo flexbox. |
grid | Este elemento se comportará como elementos de bloque y formateará su contenido usando una forma de cuadrícula. |
<display-listitem>
El elemento generará un cuadro de bloque para su contenido y un contenedor en línea para cada elemento de la lista.
Si no se especifica <display-inside>
, el tipo de visualización del contenido interno del elemento es flow
, si no se especifica <display-outside>
, el tipo de visualización del cuadro exterior del elemento es block
.
<display-internal>
El estilo de disposición de table
tiene una estructura interna compleja con varios roles que pueden desempeñar los child del elemento. Estos valores definen sólo los valores internos, que tienen significado sólo en el estilo de diseño de la tabla.
El estilo de la visualización exterior e interior de los elementos se establecerá en el valor de palabra reservado especificado a menos que se establezca lo contrario:
Propiedad | Función |
---|---|
table-row-group | Tendrá un comportamiento igual que los elementos <tbody> en HTML. |
table-header-group | Tendrá un comportamiento igual que los elementos <thead> en HTML. |
table-footer-group | Tendrá un comportamiento igual que los elementos <tfoot> en HTML. |
table-row | Tendrá un comportamiento igual que los elementos <tr> en HTML. |
table-cell | Los elementos se comportarán igual que los elementos <td> en HTML. |
table-column-group | Los elementos se comportarán igual que los elementos <colgroup> en HTML. |
table-column | Los elementos se comportarán igual que los elementos <col> en HTML. |
table-caption | Los elementos se comportarán igual que los elementos <caption> en HTML. |
<display-box>
Este valor determina si el objeto generará un box o no.
La palabra reservada none
hace que el elemento no se represente por completo, incluidos todos sus elementos secundarios, y la página se procesará como si el elemento no estuviera en el tree del documento.
Si desea que el elemento ocupe el espacio que normalmente ocupa pero no muestre nada, use la propiedad en visibility
lugar de display
.
<display-legacy>
El CSS 2 usó solo una palabra reservada para describir la propiedad display
, lo que significa que se necesitan palabras reservadas separadas para combinar más de un tipo de visualización de elementos en el mismo modelo de diseño:
Propiedad | Función |
---|---|
inline-block | Este elemento generará un cuadro de elemento de bloque que se mezclará con el contenido circundante como si fuera un cuadro en línea. Este valor es equivalente a usar inline flow-root . |
inline-table | El valor inline-table no tiene equivalente directo en HTML, se comporta como tablas <table> en HTML pero en cuadros en línea, en lugar de usar cuadros de bloque. Este valor es equivalente a usar inline table . |
inline-flex | El elemento se comportará como un elemento en línea pero formateará su contenido de acuerdo con un modelo flexbox. Este valor es equivalente a usar inline flex . |
inline-grid | El elemento se comportará como un elemento en línea pero formateará su contenido en forma de cuadrícula. |
Estructura de uso del CSS display
display : [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>;
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS