---
title: "Elemento inline añade espacio por arriba o por debajo cuando se modifica el overflow en CSS"
description: "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..."
url: https://dev.adammartin.es/micro-pildora/inline-anade-espacio-cambia-todo/
date: 2025-01-21
modified: 2026-08-04
author: "Adam Martin"
type: micro-pildora
lang: es
---

# Elemento inline añade espacio por arriba o por debajo cuando se modifica el overflow en CSS

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)](https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#inline-formatting), 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](https://stackoverflow.com/a/51088033) que encontré el motivo, también tienes este post de [Vicent de Oliveira](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align) 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. 🙂