Imagine que está trabajando como desarrollador y un colega diseñador le entrega el diseño para un nuevo sitio web. El diseño tiene todo tipo de distribución de elementos y composiciones interesantes: diseños bidimensionales que tienen en cuenta el ancho y la altura de la ventana gráfica, así como diseños que deben ser fluidos y flexibles. ¿Cómo decides la mejor manera de llevarlos a cabo con CSS?
El CSS nos proporciona varias formas de resolver problemas de diseño en un eje vertical, horizontal o incluso ambos. Elegir el método de diseño adecuado para un contexto puede ser difícil y, a menudo, es posible que necesite más de un método de diseño para resolver su problema. Para ayudar con esto, en los siguientes módulos, aprenderá sobre las características únicas de cada mecanismo de diseño CSS para informar esas decisiones.
Diseño: una breve historia
En los primeros días de la web, los diseños más complejos que un simple documento se presentaban con elementos <table>. La separación de HTML de los estilos visuales se hizo más fácil cuando los navegadores adoptaron CSS ampliamente a finales de los noventa. El CSS abrió la puerta a que los desarrolladores pudieran cambiar completamente la apariencia de un sitio web sin tener que tocar el HTML. Esta nueva capacidad inspiró proyectos como The CSS Zen Garden, creado para demostrar el poder del CSS y alentar a más desarrolladores a aprenderlo. El CSS ha evolucionado a medida que evolucionan nuestras necesidades de diseño web y tecnología de navegador. Puede leer cómo el diseño CSS y nuestro enfoque de diseño han evolucionado con el tiempo en este artículo de Rachel Andrew. 
Diseño: el presente y el futuro
El CSS moderno tiene herramientas de diseño excepcionalmente poderosas. Tenemos sistemas dedicados para el diseño y vamos a tener una visión de alto nivel sobre lo que tenemos a nuestra disposición, antes de profundizar en más detalles de Flexbox y Grid en los próximos módulos.
Comprender la propiedad display
La propiedad display hace dos cosas. Lo primero es determinar si la caja a la que se aplica actúa como en línea o en bloque.
.my-element {
display: inline;
}
Los elementos en línea se comportan como palabras en una oración. Se sientan uno al lado del otro en la dirección en línea. Los elementos como <span> y <strong>, que se utilizan normalmente para dar estilo a fragmentos de texto dentro de elementos que contienen elementos como un <p> (párrafo), van en línea de forma predeterminada. También conservan los espacios en blanco circundantes.