> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Corrige el espacio bajo un SVG en línea mediante CSS

> Identifica si el espacio bajo el SVG pertenece a la caja de línea HTML o al diseño. Elige visualización en bloque o alineación en línea y verifica el resultado.

Source: https://perfectvector.com/es/blog/inline-svg-baseline-gap

Language: es
Author: Irene Kim
Published: 2026-10-22T08:00:00+09:00

Un pequeño espacio bajo un SVG puede proceder de la línea HTML que lo contiene. Un gráfico en línea participa en la composición del texto, donde la línea base y la altura de línea pueden dejar sitio debajo de su caja. Para una imagen independiente, prueba `display: block`. Para un gráfico que deba permanecer junto al texto, elige deliberadamente su alineación en línea.

Primero localiza el espacio. Si queda **fuera de la caja del elemento SVG**, hay que revisar la disposición de página. Si queda **dentro de esa caja**, puede pertenecer al lienzo SVG o a sus reglas de ajuste. Volver a trazar un logo no repara el primer problema. Esta guía ayuda a distinguir ambos y verificar una corrección CSS pequeña y local.

## Localiza la caja que contiene el espacio

Asigna fondos contrastantes al SVG y a su contenedor inmediato en las herramientas de desarrollo del navegador. Inspecciona también los contornos de los elementos. El fondo es una ayuda temporal de diagnóstico; no tiene que formar parte del diseño entregado.

```css
.logo-wrap {
  background: peachpuff;
}

.logo-wrap > svg {
  background: lightgreen;
}
```

Si el color durazno continúa debajo de la caja SVG verde, inspecciona la composición de línea, el relleno, el borde, la altura y los elementos vecinos del contenedor. Si el verde continúa debajo del dibujo visible, inspecciona el `viewBox` del diseño, sus límites pintados y cómo encaja en el viewport.

Ambas cosas pueden ocurrir a la vez. Corregir la caja de línea puede eliminar una franja fina y dejar un margen transparente mayor dentro de la imagen. La [guía de ajuste SVG](https://perfectvector.com/es/blog/svg-preserveaspectratio) explica cómo interactúan el rectángulo fuente y el viewport de destino. No ajustes un `viewBox` a los límites del dibujo hasta saber que el espacio no deseado está dentro de él.

El método de incorporación también importa. Un `<svg>` en línea es parte del documento HTML; un `<img src="logo.svg">` carga una imagen externa. Sus límites de estilos difieren, como explica la [guía de SVG en línea frente a imagen](https://perfectvector.com/es/blog/inline-svg-vs-img). En este diagnóstico inspecciona el elemento situado en la fila HTML, en vez de suponer que todos los archivos SVG se incorporan igual.

## Por qué la línea base puede dejar espacio debajo

Las líneas de texto necesitan espacio para letras que descienden bajo la línea base, como `g` y `p`. Un gráfico en línea puede alinearse con ella mientras la línea que lo contiene sigue extendiéndose por debajo. Por eso poner a cero el margen de la imagen puede no cambiar nada.

Las [reglas de cálculo de altura de línea CSS](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) determinan una caja de línea a partir de las cajas participantes y su alineación. La fuente y la altura de línea del elemento padre contribuyen incluso cuando el contenido visible es un gráfico. La franja exacta depende, por tanto, de los estilos circundantes, no de un margen SVG fijo.

No confundas esa línea base con la de las letras dibujadas *dentro* del SVG. Cambiar `dominant-baseline` en un elemento de texto SVG afecta a esas letras internas. No determina cómo se coloca todo el gráfico en su línea HTML.

### Un ejemplo medido sin lienzo SVG vacío

Creamos una página HTML original con tres copias del mismo SVG. Cada SVG tiene un viewBox de `240 × 100` relleno de borde a borde por un rectángulo y se renderiza a `240 × 100` píxeles CSS. Las filas usan Arial a `40px` y una altura de línea de `48px`. Solo cambia la visualización o alineación del SVG.

El navegador devolvió estas medidas de elementos:

| Tratamiento del SVG                  | Altura SVG | Altura de fila | Espacio bajo la caja SVG |
| ------------------------------------ | ---------- | -------------- | ------------------------ |
| En línea, alineado con la línea base | 100px      | 110.5px        | 10.5px                   |
| Visualización en bloque              | 100px      | 100px          | 0px                      |
| En línea, alineado abajo             | 100px      | 100px          | 0px                      |

![Comparación en navegador del mismo SVG sólido con una franja de 10.5 píxeles bajo la versión en línea alineada a la base y sin franja en las versiones en bloque y alineada abajo](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*El rectángulo pintado llena cada SVG. La franja durazno bajo la primera caja verde pertenece a su fila HTML, no a un espacio adicional del viewBox.*

Son medidas de esta página en un navegador, no una promesa de un espacio de 10.5px en todas las composiciones. Comparamos la coordenada inferior del contenedor con la del SVG. La altura SVG se mantuvo en 100px en los tres casos, así que la corrección no redujo ni recortó el dibujo.

## Usa visualización en bloque para un gráfico independiente

Si el logo debe ocupar su propia fila, aplica la regla de composición a esa imagen concreta:

```css
.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}
```

La [referencia de display de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) distingue la participación en bloque y en línea en el flujo. Convertir el SVG en bloque elimina su papel de elemento en línea dentro del texto circundante. No edita los trazados fuente ni quita márgenes transparentes del diseño.

Comprueba de nuevo el contenedor después de aplicar la regla. Si sigue extendiéndose bajo la imagen, busca una altura explícita, relleno, otro hijo, un pseudoelemento o una línea adicional. Un salto de línea o nodo de texto después de un gráfico en bloque puede introducir contenido propio. Un antecesor también puede ser responsable del espacio visible.

Mantén el selector específico. Aplicar `svg { display: block; }` a todo un sitio puede mover iconos que pertenecen intencionalmente a etiquetas o frases. Elige el componente que necesita un gráfico independiente e inspecciona sus otros usos.

## Mantén en línea los gráficos junto al texto y elige su alineación

Para un icono o marca pequeña junto a palabras, conservarlo en línea puede ser la disposición prevista. `vertical-align: bottom` alinea su borde inferior de margen con la parte inferior de la línea. `vertical-align: middle` usa la línea base y la altura de x del padre; no ordena centrar geométricamente todas las imágenes en todos los contenedores. Consulta las [definiciones de vertical-align de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align).

```css
.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
```

Elige entre esos valores inspeccionando la etiqueta y la fuente reales. Un icono que toca la parte inferior de la línea puede parecer demasiado bajo junto a letras mayúsculas. Una marca alineada con `middle` puede seguir necesitando un ajuste óptico si el dibujo visible se distribuye de forma desigual dentro de su caja.

El caso alineado abajo de nuestro ejemplo solo contenía el gráfico. Demuestra que esa alineación eliminó la franja en esa fila concreta. No establece que todas las filas que mezclan texto e iconos tengan la misma altura o apariencia.

Evita usar `line-height: 0` en un contenedor compartido de texto como primera solución. Cambia la disposición del texto además del espacio de imagen. Puede ocultar el síntoma inmediato y dejar el componente sujeto a futuras reglas que lo corrijan cuando alguien añada una etiqueta. Elige la visualización o alineación prevista antes de cambiar la tipografía del padre.

## Verifica la corrección sin cambiar el diseño

Haz un cambio cada vez y comprueba:

1. **Límite del elemento:** ¿el espacio visible queda ahora dentro o fuera de la caja SVG?
2. **Dimensiones:** ¿el SVG conserva el ancho, la altura y las proporciones previstos?
3. **Vecinos:** ¿las etiquetas, enlaces e iconos siguen en su sitio?
4. **Composición adaptable:** ¿el componente se comporta correctamente en tamaños estrechos y anchos?
5. **Estilos calculados:** ¿prevalece la declaración prevista o la anula una regla más específica?

En un contenedor sencillo sin bordes ni relleno, comparar su coordenada inferior con la de la imagen es una comprobación útil. En un componente real, ten en cuenta el relleno intencional y el resto del contenido antes de considerar la diferencia un error.

Si la página necesita otra disposición en pantallas pequeñas, verifícala también. Una corrección válida para un logo aislado puede no servir para una fila de navegación con texto en varias líneas. Retira los fondos temporales cuando el límite esté claro.

## Cuándo ayuda la vectorización en este flujo

Un SVG editable existente suele necesitar aquí una corrección de CSS o lienzo. Conserva ese archivo y diagnostica su colocación antes de reconstruirlo.

Si la marca solo existe como PNG o JPG y necesita contornos editables, [usa PerfectVector para convertir la imagen fuente en diseño vectorial](https://perfectvector.com/es/image-to-vector), e inspecciona el contorno, las aberturas y el lienzo fuente antes de colocar el resultado en la página. La [guía de evaluación de calidad del trazado](https://perfectvector.com/es/blog/evaluate-vector-trace-quality) ayuda con esa comprobación geométrica separada. La vectorización prepara formas; el CSS de página sigue controlando la caja de línea HTML.

## Preguntas frecuentes

**¿Por qué margin: 0 no elimina el espacio bajo mi SVG?**
El espacio puede pertenecer a la línea de texto que lo contiene, no a los márgenes SVG. Inspecciona los límites del SVG y su contenedor; prueba después la visualización en bloque para una imagen independiente o una alineación vertical apropiada para un gráfico en línea.

**¿display: block recorta el espacio vacío del SVG?**
No. Cambia la participación del elemento en la disposición HTML. El espacio vacío dentro del viewBox permanece y necesita una comprobación separada del diseño o su ajuste.

**¿Debo usar vertical-align: bottom o middle?**
Usa el valor que corresponda a la fila real. Bottom alinea con la parte inferior de la línea; middle usa la línea base y la altura de x del padre. Inspecciona el resultado con la fuente final y el texto vecino, en lugar de tratar cualquiera de los dos valores como un centrado universal.

## Fuentes

1. [W3C — Altura de línea y alineación vertical CSS](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — Cómo contribuyen las cajas participantes, su alineación y la tipografía del padre a la altura de línea.
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — Diferencia entre participación en bloque y en línea en el flujo.
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — Alineaciones con línea base, inferior y media, y cajas a las que se aplica la propiedad.

***

¿Partes de una marca que solo existe como ráster? [Prepara formas SVG editables](https://perfectvector.com/es/image-to-vector), compara sus contornos y lienzo con la fuente y verifica la colocación del SVG en el componente real de página.

## Explore

- [Read the HTML article](https://perfectvector.com/es/blog/inline-svg-baseline-gap)
- [Evita saltos del logo SVG reservando su espacio](https://perfectvector.com/es/blog/svg-logo-layout-reservation.md)
- [Logo SVG en modo oscuro: elige qué controla el color](https://perfectvector.com/es/blog/dark-mode-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)