Lección 7: Display

Introducción a la propiedad display

La propiedad display en CSS es fundamental para controlar cómo se muestra un elemento en el diseño de una página web. Determina si un elemento se trata como un bloque, en línea, o incluso si se muestra o no.

Valores comunes de display

block

Los elementos de bloque comienzan en una nueva línea y ocupan todo el ancho disponible.

CSS


div {
    display: block;
}

inline

Los elementos en línea no comienzan en una nueva línea y solo ocupan el ancho necesario.

CSS


span {
    display: inline;
}

inline-block

Combina características de block e inline. El elemento se coloca en línea, pero se puede establecer ancho y alto.

CSS


.inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
}

none

El elemento no se muestra y no ocupa espacio en el diseño.

CSS


.hidden {
    display: none;
}

Otros valores de display

Existen otros valores de display más avanzados que permiten crear diseños más complejos:

flex: Crea un contenedor flex, útil para diseños flexibles y responsivos.
grid: Crea un contenedor de cuadrícula, ideal para diseños de dos dimensiones.
table: Hace que el elemento se comporte como una tabla.

Flex y Grid son temas más avanzados que se cubrirán en lecciones posteriores.

Ejercicio práctico

Crea un diseño simple que utilice diferentes valores de display. Incluye elementos con display: block, inline, inline-block, y none. Observa cómo afecta cada valor al diseño.