CSS Display

La propiedad display en CSS se utiliza para establecer cómo se muestra un elemento en una página web. El valor de esta propiedad determina cómo se comporta el elemento en cuanto a tamaño, posición y cómo afecta a los elementos vecinos.

Aprende HTML y CSS en un fin de semana (Spanish Edition)

Ver Ofertas en Amazon

HTML 5, JavaScript y CSS: Crea tu web y apps con el estánd...

Ver Ofertas en Amazon

CSS: Diseño web (Desarrollo web nº 2) (Spanish Edition)

Ver Ofertas en Amazon

Sintaxis

La sintaxis para establecer el valor de la propiedad display en CSS es la siguiente:

selector {
  display: value;
}
Lenguaje del código: CSS (css)

Donde selector es el elemento o los elementos HTML a los que se aplicará la regla de estilo, y value es el valor de display que se quiere establecer. Puede ser cualquiera de los valores mencionados anteriormente, como block, inline, none, flex, etc.

Por ejemplo, para establecer un elemento div como un bloque, se puede utilizar la siguiente regla:

div {
  display: block;
}
Lenguaje del código: CSS (css)

También se pueden establecer varios selectores para aplicar a varios elementos al mismo tiempo, separando cada selector con una coma:

div, p, h1 {
  display: block;
}
Lenguaje del código: CSS (css)

Además, también se pueden establecer valores para display utilizando una clase o un id:

.container {
  display: flex;
}

#main-header {
  display: grid;
}
Lenguaje del código: CSS (css)

Es importante tener en cuenta que algunos valores de display pueden tener un comportamiento diferente en función del contexto en el que se usen. Por ejemplo, un elemento con display: block dentro de un elemento con display: flex se comportará de manera diferente a un elemento con display: block en un elemento padre con display: block.

Valores

Los valores disponibles para la propiedad display en CSS incluyen:

block: El elemento se comporta como un bloque, ocupando todo el ancho disponible de su contenedor y se posiciona en una nueva línea. Los elementos con display: block pueden tener un ancho y un alto especificados.
inline: El elemento se comporta como una línea de texto, ocupando solo el ancho necesario y se posiciona en la misma línea que los elementos vecinos. Los elementos con display: inline no pueden tener un ancho o alto especificado.
inline-block: El elemento se comporta como un elemento inline, pero también permite especificar un ancho y un alto.
none: El elemento no se muestra en absoluto y no ocupa espacio en la página.
flex: El elemento se comporta como un contenedor flex, permitiendo posicionar y alinear sus elementos hijos de manera flexible.
grid: El elemento se comporta como un contenedor grid, permitiendo posicionar y alinear sus elementos hijos en una cuadrícula.
table: El elemento se comporta como una tabla con filas y columnas.
table-caption: El elemento se comporta como un título de tabla.
table-cell: El elemento se comporta como una celda de una tabla.
table-row: El elemento se comporta como una fila de una tabla.
table-column: Muestra un elemento como una columna en una tabla.
table-row-group: El elemento se comporta como un grupo de filas de una tabla.
table-header-group: El elemento se comporta como un grupo de encabezados de una tabla.
table-footer-group: El elemento se comporta como un grupo de pie de página de una tabla.
list-item: El elemento se comporta como un elemento de una lista.
flow-root: Muestra un elemento como un bloque independiente del flujo de documento, es útil para contener elementos flotantes.
flow: Muestra un elemento como un elemento flotante.
run-in: El elemento se comporta como un elemento block o inline, dependiendo del contexto.
initial: El elemento se comporta como el valor inicial establecido por el navegador.

Cada uno de estos valores tiene diferentes usos y comportamientos, es importante tener en cuenta que es importante conocer y utilizar el valor adecuado de acuerdo a la necesidad de diseño de tu proyecto.

Ejemplos

Aquí hay algunos ejemplos de cómo se utilizan algunos valores comunes de display en CSS:

block:

/* Establece el elemento como un bloque que ocupa todo el ancho disponible de su contenedor */
div {
    display: block;
    /* establece el ancho del elemento a la mitad de su contenedor */
    width: 50%; 
    /* establece un margen alrededor del elemento */
    margin: 10px; 
}
Lenguaje del código: CSS (css)

inline:

/* Establece el elemento como una línea de texto, ocupando solo el ancho necesario */
span {
    display: inline;
}
Lenguaje del código: CSS (css)

inline-block:

/* Establece el elemento como un elemento inline, pero permite especificar un ancho y un alto */
button {
    display: inline-block;
    /* establece el ancho del elemento */
    width: 100px; 
    /* establece el alto del elemento */
    height: 50px; 
}
Lenguaje del código: CSS (css)

none:

/* Oculta el elemento */
.hidden {
    display: none;
}
Lenguaje del código: CSS (css)

flex:

/* Establece el elemento como un contenedor flex */
.container {
    display: flex;
    /* permite que los elementos hijos se ajusten al ancho del contenedor */
    flex-wrap: wrap;
    /* alinea los elementos hijos en el centro verticalmente */
    align-items: center;
    /* distribuye los elementos hijos con espacio entre ellos */
    justify-content: space-between;
}
Lenguaje del código: CSS (css)

grid:

/* Establece el elemento como un contenedor grid */
.grid-container {
    display: grid;
    /* define una cuadrícula con 3 columnas de tamaño igual */
    grid-template-columns: repeat(3, 1fr);
    /* define una fila de 100px */
    grid-template-rows: 100px; 
    /* establece un espacio de 10px entre las celdas de la cuadrícula */
    grid-gap: 10px; 
}
Lenguaje del código: CSS (css)

table:

/* Establece el elemento como una tabla con filas y columnas */
table {
    display: table;
    /* elimina los espacios entre las celdas */
    border-collapse: collapse; 
    /* hace que la tabla ocupe todo el ancho del contenedor */
    width: 100%; 
}
Lenguaje del código: CSS (css)

table-caption:

/* Establece el elemento como un título de tabla */
caption {
    display: table-caption;
    /* alinea el texto en el centro */
    text-align: center;
    /* establece el tamaño de la fuente */
    font-size: 16px;
}
Lenguaje del código: CSS (css)

table-cell:

/* Establece el elemento como una celda de una tabla */
td {
    display: table-cell;
    /* establece un relleno alrededor del texto */
    padding: 10px;
    /* alinea el texto en el centro */
    text-align: center;
    /* establece un borde alrededor de la celda */
    border: 1px solid black;
}
Lenguaje del código: CSS (css)

table-row:

/* Establece el elemento como una fila de una tabla */
tr {
    display: table-row;
}Lenguaje del código: CSS (css)

table-row-group:

/* Establece el elemento como un grupo de filas de una tabla */
thead {
    display: table-row-group;
}
Lenguaje del código: CSS (css)

table-header-group:

/* Establece el elemento como un grupo de encabezados de una tabla */
th {
    display: table-header-group;
    /* establece el color de fondo */
    background-color: #ddd; 
    /* establece el peso de la fuente en negrita */
    font-weight: bold;
}
Lenguaje del código: CSS (css)

table-footer-group:

/* Establece el elemento como un grupo de pie de página de una tabla */
tfoot {
    display: table-footer-group;
    /* establece el color de fondo */
    background-color: #ddd;
    /* alinea el texto en el centro */
    text-align: center;
}
Lenguaje del código: CSS (css)

list-item:

/* Establece el elemento como un elemento de una lista */
li {
    display: list-item;
    /* establece el tipo de viñeta */
    list-style-type: square;
    /* establece un margen izquierdo */
    margin-left: 20px;
}
Lenguaje del código: CSS (css)

run-in:

/* Establece el elemento como un elemento `block` o `inline`, dependiendo del contexto */
h1 {
    display: run-in;
    /* establece el tamaño de la fuente */
    font-size: 24px;
}
Lenguaje del código: CSS (css)

compact:

/* Establece el elemento como un elemento `block` o `inline`, dependiendo del contexto y del tamaño del contenedor */
p {
    display: compact;
    /* establece el tamaño de la fuente */
    font-size: 16px;
    /* establece un margen alrededor del elemento */
    margin: 10px;
}
Lenguaje del código: CSS (css)

marker:

/* Establece el elemento como un marcador de una lista */
li::marker {
    display: marker;
    /* establece el tipo de viñeta */
    list-style-type: disc;
    /* establece el color de la viñeta */
    color: red;
}
Lenguaje del código: CSS (css)

initial:

/* Establece el elemento como el valor inicial establecido por el navegador */
.initial {
    display: initial;
}
Lenguaje del código: CSS (css)

inherit:

/* Establece el elemento para heredar el valor de `display` de su elemento padre */
.inherit {
    display: inherit;
}
Lenguaje del código: CSS (css)