La propiedad display en CSS es la regla que decide cómo se comporta una caja dentro del flujo de la página.
Hasta ahora hemos visto que en HTML hay elementos de bloque, como <div> o <p>, y elementos en línea, como <span> o <a>. Eso es su comportamiento por defecto. Pero con CSS podemos cambiarlo.
display es una de esas propiedades que parece sencilla al principio, y luego resulta que está en todas partes.
Define si un elemento salta de línea, si se coloca junto a otros, si acepta ancho y alto, si desaparece, o si activa sistemas de maquetación como Flexbox y Grid.
El flujo normal del documento
Por defecto, el navegador coloca los elementos siguiendo el flujo normal. Va leyendo el HTML de arriba a abajo y dibuja cada caja según su tipo.
Los elementos de bloque ocupan todo el ancho disponible y empujan lo siguiente hacia abajo.
<div>Primera caja</div>
<div>Segunda caja</div>
Los elementos en línea solo ocupan lo necesario y se colocan dentro de la misma línea si caben.
<p>Texto con <span>una parte marcada</span> dentro del párrafo.</p>
Con display, podemos alterar este comportamiento.
display: block
Un elemento con display: block se comporta como una caja de bloque. Ocupa todo el ancho disponible de su contenedor y empieza en una línea nueva.
a {
display: block;
}
Esto es muy útil en menús verticales. Un enlace (<a>) es en línea por defecto, así que solo se puede pulsar exactamente sobre el texto. Si lo convertimos en bloque y le añadimos padding, toda la zona se vuelve cómoda de usar.
<nav>
<a href="/">Inicio</a>
<a href="/proyectos/">Proyectos</a>
<a href="/contacto/">Contacto</a>
</nav>
nav a {
display: block;
padding: 12px;
}
Este patrón aparece muchísimo en navegación lateral, tarjetas clicables y botones construidos con enlaces.
display: inline
Un elemento con display: inline se comporta como texto dentro de una línea. No fuerza salto de línea y solo ocupa el espacio de su contenido.
li {
display: inline;
}
Esto podría hacer que varios elementos de una lista aparezcan uno detrás de otro en la misma línea.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Pero los elementos en línea tienen una limitación importante: no aceptan width y height como una caja normal.
span {
display: inline;
width: 200px; /* Esto no se comporta como esperáis */
height: 80px; /* Esto tampoco */
}
El navegador está tratando ese elemento como parte del texto. No como un bloque independiente.
display: inline-block
inline-block es una mezcla bastante práctica. El elemento se coloca en línea con otros, pero por dentro se comporta como una caja a la que sí podemos dar tamaño.
.etiqueta {
display: inline-block;
padding: 0.4rem 0.7rem;
border-radius: 999px;
background-color: #e0f2fe;
}
<p>
Tecnologías:
<span class="etiqueta">HTML</span>
<span class="etiqueta">CSS</span>
<span class="etiqueta">JavaScript</span>
</p>
Este patrón es perfecto para badges, etiquetas, botones pequeños o elementos que deben ir en la misma línea, pero con forma de caja.
Antes de Flexbox, inline-block se usaba muchísimo para maquetar columnas. Hoy lo usamos menos para layout grande, pero sigue siendo muy útil para piezas pequeñas de interfaz.
display: none
display: none elimina el elemento del renderizado. El navegador actúa como si esa caja no existiera.
.oculto {
display: none;
}
Esto tiene dos consecuencias importantes:
- El elemento no ocupa espacio en la página.
- El elemento no aparece visualmente ni forma parte del flujo de layout.
<p>Antes</p>
<p class="oculto">Este texto está oculto</p>
<p>Después</p>
El párrafo “Después” subirá para ocupar el hueco. No queda un espacio reservado.
Un elemento con display: none tampoco será accesible para lectores de pantalla en condiciones normales. Si queréis ocultar algo solo visualmente pero mantenerlo disponible para accesibilidad, hace falta otra técnica.
display: flex y display: grid
display también sirve para activar sistemas de maquetación modernos.
.contenedor {
display: flex;
}
.galeria {
display: grid;
}
Cuando ponemos display: flex, el elemento se convierte en un contenedor flexible y sus hijos directos pasan a obedecer las reglas de Flexbox.
Cuando ponemos display: grid, el elemento se convierte en una cuadrícula y sus hijos directos pueden colocarse en filas y columnas.
No vamos a profundizar aquí en Flexbox y Grid, porque tendrán sus propias entradas. De momento quedaos con esta idea: display no solo decide si una caja es bloque o línea, también decide qué algoritmo de layout gobierna a sus hijos.
Ocultar elementos
visibility: hidden
visibility no es lo mismo que display, pero conviene verlo aquí porque suele confundirse.
.invisible {
visibility: hidden;
}
Con visibility: hidden, el elemento no se ve, pero sigue ocupando su hueco en la página.
<p>Antes</p>
<p class="invisible">Este texto no se ve, pero ocupa espacio</p>
<p>Después</p>
El párrafo “Después” no sube, porque la caja invisible sigue estando ahí.
display: none: desaparece y no ocupa espacio.visibility: hidden: desaparece, pero conserva su espacio.opacity: 0: no se ve, conserva su espacio y puede seguir recibiendo interacción si no lo controlamos.
opacity: 0
Otra forma de ocultar visualmente un elemento es hacerlo totalmente transparente.
.transparente {
opacity: 0;
}
Esto no cambia el layout. La caja sigue ahí, ocupa espacio y puede seguir capturando clics.
.transparente {
opacity: 0;
pointer-events: none;
}
Si no queréis que el usuario pueda interactuar con un elemento transparente, podéis añadir pointer-events: none.
opacity es muy útil para animaciones de aparición y desaparición. display no se anima bien, porque un elemento no puede ir pasando gradualmente de “no existe” a “existe”. CSS no negocia con fantasmas.
