Vimos que los elementos se dividen en dos familias: los de bloque, que ocupan toda la línea disponible sin importar cuánto mida su contenido (como <div>, <p>, los títulos), y los en línea, que solo ocupan el espacio que necesita su contenido (como <span>, <strong>, <a>).
Aquí viene el giro inesperado: con CSS puedes cambiar eso. Puedes hacer que un elemento de bloque se comporte como uno en línea, y viceversa. La naturaleza de un elemento ya no es inmutable — tú decides.
Prueba esto. Tres párrafos normales, uno debajo del otro:
Ahora diles que se comporten como elementos en línea:
¡Los tres párrafos aparecen uno junto al otro en la misma línea! Ya no reclaman toda la fila para ellos solos. Ahora solo ocupan el ancho de su texto.
Para verlo mejor, añade un borde y comprueba visualmente cuánto espacio ocupa cada uno:
También funciona al revés. ¿Tienes un elemento en línea como <strong> y quieres que salte a su propia línea?
Ahora el <strong> se comporta como un bloque — aunque esté dentro del párrafo, aparecerá en su propia línea.
¿Y si necesitas lo mejor de los dos mundos? Un elemento que se muestre en línea junto a otros, pero que también acepte propiedades propias de los elementos de bloque (como width y height)?
Para eso existe display: inline-block — el híbrido perfecto. Se comporta como un elemento en línea hacia afuera (se pone junto a otros), pero por dentro acepta dimensiones y espaciados propios de los bloques.
Verás los párrafos uno junto al otro (como inline), pero ahora podrás darles width, height, padding y margin completos (como block).
Escribe tres párrafos en el HTML y mediante un selector de etiqueta, haz que todos se muestren en la misma línea.
El display es el interruptor que cambia cómo el mundo ve a un elemento...