Quería hacer unas animaciones con un logo donde se ocultaban letras internas para dejar solo la abreviación de la marca. La idea es que era con el scroll, por lo que se me ocurrió modificar el width de los elementos a cero para ocultarlos. Como eran letras, estaban dentro de un párrafo y las separaciones eran spans dividiendo los textos.
Todos esos spans están en display: inline-block para que pueda estar todos en línea y poder jugar con los apartados.
Pero claro, cuando te digo que pongo el width a cero, implica que se va a seguir viendo igualmente. Para ello, aplicamos el overflow: hidden y, de repente, algo ha pasado. Es como si hubiera flotado y se ha salido de su contenedor. ¿QUÉ ESTÁ PASANDO?
Tranquil@: hay una explicación bastante lógica. Según los contextos de formato en línea (Inline formatting contexts), los elementos en línea se colocan dentro de «line boxes» junto con el texto y otros elementos similares, alineándose entre sí. La altura de cada línea se calcula desde el elemento más alto hasta el más bajo.
Por defecto, los elementos en línea se alinean con la línea base de la fuente. Aunque no haya texto real, se genera un «texto imaginario» que determina la línea base y la altura mínima del «line box», incluyendo espacio para ascendentes, diacríticos y descendentes.
¿Qué pasa? Que al aplicar el overflow: hidden hace que se pierda el overflow: visible por defecto. Al cambiar esto, provoca que el vertical-align pase a ser baseline. Esto hará que suba o baje los elementos porque se está intentado alinear con otras cajas.
Arreglando el vertical-align a top o bottom, ya podrías arreglar perfectamente ese espacio extra que se te añade. Puedes jugar con el cambio de esta propiedad evitando que sea baseline para poder ajustarlo a las necesidades de tu proyecto.
Tienes más info en la respuesta de StackOverflow que encontré el motivo, también tienes este post de Vicent de Oliveira donde lo explica genial.
Esta entrada ha sido traducida para ayudar a esos devs que buscan en español. Además de acordarme yo para futuras veces. 🙂