CSS Display (visualización)
La propiedad display define cómo aparece un elemento en el documento. Afecta directamente la disposición y el comportamiento de los elementos.
Valores básicos de display
Los valores más importantes de display son: block, inline, inline-block, flex, grid y none. Cada uno cambia cómo se distribuye el elemento.
| Valor | Efecto |
|---|---|
| block | Se muestra como un bloque y salta a una nueva línea. |
| inline | Se muestra en línea, sin romper la línea. |
| inline-block | Se muestra en línea, pero se comporta como un bloque. |
| flex | Crea un diseño flexible para los hijos. |
| grid | Proporciona una cuadrícula para organizar el diseño. |
| none | El elemento no se muestra en el documento. |
Ejemplos de Block, Inline e Inline-Block
En este ejemplo, se usan tres valores distintos de display para mostrar sus diferencias.
Un elemento block ocupa toda la línea, inline continúa en la misma línea, mientras que inline-block combina ambas características.
Fundamentos de Flexbox
El diseño flex permite distribuir, dimensionar y alinear los elementos hijos de forma flexible.
Consejos para usar display
Elegir el valor correcto de display es esencial para un buen diseño.
- Usa flex o grid para diseños más complejos.
- Inline-block es útil para colocar varios elementos en línea.
- Display: none elimina el elemento visualmente, pero sigue en el DOM.
✨ Pregunta a Lara — tu compañera de estudio con IA
Desbloquea soporte de aprendizaje personalizado. Lara puede explicar lecciones, resumir temas y responder tus preguntas — disponible desde el plan Go y superiores.
Lara te ayuda a aprender más rápido — exclusivo para los miembros ReadyTools Go, Plus y Max.
