La propiedad display: inline-block

A veces necesitamos colocar en una misma línea varios elementos con dimensiones definidas. Las cajas de texto en línea no sirven para esto, porque no responden a las dimensiones. Las cajas de bloque tampoco, porque tienen un salto de línea antes y después. Es posible adaptar las cajas de bloque a esta tarea con otras propiedades, que veremos más adelante.

Pero hay una forma más sencilla: usar cajas de bloque en línea. Puedes asignar este tipo de caja a un elemento con la propiedad display y el valor inline-block.

Características de las cajas de bloque en línea:

• puedes asignarles dimensiones, bordes, relleno y márgenes, igual que a las cajas de bloque;
• su ancho predeterminado depende del contenido: no se estiran hasta ocupar todo el ancho del contenedor;
• no generan saltos de línea forzados, por lo que pueden compartir una línea mientras quepan en el contenedor padre;
• los elementos que comparten una línea se alinean verticalmente de forma similar a las cajas en línea.