Definición de .display aplicado en CSS
Cada elemento en una página web es un cuadro rectangular. La propiedad .display en CSS determina cómo se comporta esa caja rectangular.
Ejemplo de uso : propiedad CSS display
Esta propiedad de CSS se emplea de esta forma:
span.icon {
display: inline-block; /* Characteristics of block, but lays out inline */
}Sintaxis de .display en CSS
display: value;Valores
| Valor | Descripción | Juegalo |
|---|---|---|
| en línea | Muestra un elemento como un elemento en línea (como <span>). Cualquier propiedad de alto y ancho no tendrá efecto | |
| bloquear | Muestra un elemento como un elemento de bloque (como <p>). Comienza en una nueva línea y ocupa todo el ancho. | |
| contenido | Hace que el contenedor desaparezca, haciendo que los elementos secundarios sean secundarios del elemento al siguiente nivel en el DOM | |
| flexionar | Muestra un elemento como un contenedor flexible a nivel de bloque | |
| cuadrícula | Muestra un elemento como un contenedor de cuadrícula a nivel de bloque | |
| bloque en línea | Muestra un elemento como un contenedor de bloques de nivel en línea. El elemento en sí está formateado como un elemento en línea, pero puede aplicar valores de alto y ancho | |
| en línea-flex | Muestra un elemento como un contenedor flexible de nivel en línea | |
| cuadrícula en línea | Muestra un elemento como un contenedor de cuadrícula de nivel en línea | |
| tabla en línea | El elemento se muestra como una tabla de nivel en línea | |
| elemento de lista | Deje que el elemento se comporte como un elemento <li> | |
| entrar corriendo | Muestra un elemento como bloque o en línea, según el contexto | |
| mesa | Deje que el elemento se comporte como un elemento <table> | |
| título de la tabla | Deje que el elemento se comporte como un elemento <caption> | |
| tabla-columna-grupo | Deje que el elemento se comporte como un elemento <colgroup> | |
| grupo de encabezado de tabla | Deje que el elemento se comporte como un elemento <thead> | |
| grupo-pie-de-tabla | Deje que el elemento se comporte como un elemento <tfoot> | |
| tabla-fila-grupo | Deje que el elemento se comporte como un elemento <tbody> | |
| tabla-celda | Deje que el elemento se comporte como un elemento <td> | |
| tabla-columna | Deje que el elemento se comporte como un elemento <col> | |
| fila de la tabla | Deje que el elemento se comporte como un elemento <tr> | |
| ninguna | El elemento se elimina por completo. | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .display
Los números de la tabla especifican la primera versión del navegador que es absolutamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| empty-cells | 1.0 | 8.0 | 1.0 | 1.2 | 4.0 |
