Hasta ahora los elementos hacían lo que les daba la gana con su tamaño. Los de bloque ocupaban todo el ancho disponible; los en línea crecían con su contenido. En cuanto a la altura, todos — sin excepción — crecían según lo que había dentro.
¿Qué pasa si yo quiero decidir? Para eso existen las propiedades width (ancho) y height (alto).
Imagina que quieres crear un cuadrado rojo. Fácil con lo que ya sabemos:
¡Un cuadrado rojo de 200x200 píxeles! El background-color es esencial aquí — sin él, el div estaría vacío y no veríamos nada aunque tuviera dimensiones.
Aquí viene el giro inesperado. Prueba a hacer lo mismo con un elemento en línea como <span>:
Si lo pruebas verás que... nada cambia. Los <span> ignoran completamente el width y el height. ¿Por qué? Porque los elementos en línea siempre se ajustan a su contenido y no aceptan dimensiones personalizadas. Es su naturaleza.
¿Recuerdas el display que vimos en la lección anterior? inline-block es exactamente la solución a este problema. Convierte al elemento en uno que se comporta en línea hacia afuera, pero acepta todas las propiedades de bloque, incluyendo dimensiones:
Ahora tendrás dos <span> uno junto al otro, cada uno con 200x200 píxeles de tamaño. Lo mejor de ambos mundos.
Haz que los dos <span> del editor tengan display: inline-block, width: 200px y height: 200px. Así comprobarás en la práctica por qué un elemento en línea necesita cambiar su display antes de aceptar dimensiones.
Las dimensiones son el primer paso para darle forma a tus ideas...