Comprender cómo se comportan los elementos en pantalla es fundamental para construir cualquier interfaz web. La propiedad display en CSS determina el tipo de visualización que tendrá cada elemento HTML, y dominar sus valores principales te permitirá controlar con precisión el flujo y la disposición de tu contenido.
¿Qué es la propiedad display y por qué cada elemento ya tiene una?
Cada etiqueta HTML viene con un valor de display por defecto. Si revisas documentación como HTML Reference [0:30], verás que todos los tags están clasificados como inline o block. Por ejemplo, un <div> es de tipo bloque, mientras que un <a> es de tipo inline. Un caso interesante es el <button>, que la documentación marca como inline, pero en realidad se comporta como inline-block [1:10], es decir, combina características de ambos.
Esto significa que antes de escribir una sola línea de CSS, tus elementos ya tienen un comportamiento visual predeterminado que puedes modificar.
¿Cómo se comporta un elemento de tipo bloque?
Un elemento block como el <div> ocupa todo el ancho disponible de la pantalla [1:40]. Si le aplicas un background, verás que el color se extiende de extremo a extremo.
- Ocupa el 100% del ancho del contenedor padre.
- Acepta propiedades de dimensión como
width y height [2:20].
- Permite aplicar
margin en las cuatro direcciones sin restricciones.
- Siempre genera un salto de línea antes y después del elemento.
css
div {
background: salmon;
width: 200px;
height: 200px;
margin: 20px;
}
Un detalle importante: el <body> tiene un margen por defecto. Para eliminarlo basta con escribir body { margin: 0; } [2:05], algo que se hace de forma habitual al iniciar cualquier proyecto.
¿Qué limitaciones tiene un elemento inline?
Los elementos inline, como la etiqueta <a>, se comportan de manera muy diferente [2:50]. Su tamaño depende exclusivamente del contenido que tienen dentro, no crecen más allá de eso.
- No aceptan
width ni height [3:20]. Aunque los escribas en tu CSS, simplemente se ignoran.
- El
margin solo se aplica en el eje horizontal (izquierda y derecha) [3:40].
- El margen superior e inferior existe visualmente pero no empuja a los demás elementos, lo que puede generar superposiciones extrañas [4:00].
- No generan salto de línea: varios elementos inline se colocan uno al lado del otro.
css
a {
background: skyblue;
width: 200px; /* no se aplica /
height: 200px; / no se aplica /
margin: 20px; / solo horizontal */
}
¿Qué ventaja ofrece inline-block frente a los otros dos?
El valor inline-block es una combinación de ambos mundos y el <button> es un ejemplo perfecto de ello [4:30]. Un elemento con este display mantiene su tamaño ajustado al contenido como un elemento inline, pero acepta todas las propiedades de un elemento bloque.
- Su tamaño inicial es el de su propio contenido, no ocupa todo el ancho.
- Acepta
width, height y margin en todas las direcciones [5:00].
- Permite colocar varios elementos en la misma línea.
css
button {
background: salmon;
width: 200px;
height: 200px;
margin: 20px;
}
Con estas propiedades, el botón crece al tamaño indicado sin expandirse de lado a lado. Es la opción ideal cuando necesitas controlar dimensiones sin perder el comportamiento de flujo en línea.
¿Cuál es la diferencia práctica entre los tres?
- Block: ocupa toda la fila, acepta todas las propiedades de tamaño y margen.
- Inline: solo ocupa lo necesario, ignora width, height y margen vertical.
- Inline-block: ocupa lo necesario, pero sí acepta width, height y margen completo.
Estos tres valores son la base del modelo de visualización en CSS. A partir de aquí, existen dos valores modernos que transforman por completo la forma de construir layouts: Flexbox y CSS Grid [5:40], que representan las herramientas más utilizadas actualmente para crear diseños flexibles y responsivos.
¿Ya habías notado las diferencias entre estos tipos de display al crear tus proyectos? Comparte tu experiencia y las dudas que te hayan surgido.
