Cómo solucionar el problema de inline-block en CSS

En CSS hay propiedades que nos resuelven la vida, pero muchas veces que nos resuelvan un problema puede implicar que nos surjan otros. La propiedad inline-block que viene de display nos permite alinear horizontalmente elementos, algo que se podría hacer con float, si no fuera el hecho de que esta propiedad hace flotante tu contenido con respecto al demás. De igual forma inline-block nos da la posibilidad de alinear sin perder la línea del documento, pero nos presenta otro problema, que es la alineación.

En este tutorial vamos a ver cómo resolver el problema del inline-block, ya que cuando intentamos alinear dos o más elementos que difieren en contenido generalmente uno se hunde con respecto al otro, y es algo que estéticamente se ve muy mal.

Demo del tutorial

HTML

Para nuestro tutorial tenemos capas y dentro de ellas una imagen y un texto de adorno para simular el contenido, hasta ahí no hay problema.

CSS

Una vez que le aplicamos un ancho y asignamos la propiedad de inline-block vemos que como el ancho y alto de las imágenes son diferentes, así como el contenido no se ven totalmente alineados nuestros elementos.

¿Cómo se soluciona?

Para solucionar este problema usamos la propiedad vertical-align que entre otras cosas nos permite manejar cómo se comporta el alineamiento vertical de un elemento. Esta propiedad es un tanto rara porque se suele usar para alinear imágenes que sufren del mismo problema si se ponen una tras otra, pero curiosamente para alinear elementos con inline-block también funciona.

Si añadimos una alineación vertical hacía arriba (top) podemos ver que nuestro contenido se alinea con respecto a la parte superior. Podemos modificar estos valores porque hay más opciones, pero para este caso en particular lo que queremos es que todo aparezca alineado. El inconveniente es que no se genera un efecto Pinterest por defecto, pero el espacio en blanco que sobra en la parte inferior no se ve tan molesto como lo haría el espacio en la parte superior.