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

# Spazio sotto un SVG inline: correggi il layout CSS

> Individua se lo spazio sotto l'SVG appartiene alla riga HTML o alla grafica. Scegli visualizzazione a blocco o allineamento inline e verifica il risultato.

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

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

Una sottile fessura sotto un SVG può dipendere dalla riga HTML che lo contiene. Una grafica inline partecipa alla disposizione del testo, in cui la linea di base e l'interlinea possono lasciare spazio sotto il suo riquadro. Per un'immagine autonoma, prova `display: block`. Per una grafica che deve restare accanto al testo, scegli consapevolmente l'allineamento inline.

Per prima cosa individua lo spazio. Lo spazio **esterno al riquadro dell'elemento SVG** richiede un controllo dell'impaginazione della pagina. Quello **interno al riquadro** può dipendere dall'area di disegno dell'SVG o dalle regole con cui viene adattato. Ricalcare di nuovo un logo non risolve il primo problema. Questa guida ti aiuta a distinguere i due casi e a verificare una piccola correzione CSS locale.

## Trova il riquadro che contiene lo spazio

Negli strumenti per sviluppatori del browser assegna sfondi contrastanti all'SVG e al suo contenitore immediato. Controlla anche i contorni dei loro elementi. Lo sfondo è un aiuto diagnostico temporaneo; non deve diventare parte della grafica consegnata.

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

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

Se il colore pesca continua sotto il riquadro verde dell'SVG, controlla la disposizione della riga del contenitore, il padding, il bordo, l'altezza e gli elementi vicini. Se il verde continua sotto il disegno visibile, controlla il `viewBox` della grafica, i limiti della parte disegnata e il modo in cui si adatta al viewport.

I due fenomeni possono verificarsi insieme. Correggere il riquadro della riga può eliminare una striscia sottile lasciando un margine trasparente più grande all'interno dell'immagine. La [guida all'adattamento SVG](https://perfectvector.com/it/blog/svg-preserveaspectratio) spiega l'interazione tra il rettangolo sorgente e il viewport di destinazione. Non restringere un `viewBox` finché non hai accertato che lo spazio indesiderato si trovi al suo interno.

Conta anche il metodo di incorporamento. Un `<svg>` inline fa parte del documento HTML; un `<img src="logo.svg">` carica un'immagine esterna. I confini entro cui puoi applicare gli stili sono diversi, come spiega la [guida SVG inline e immagine](https://perfectvector.com/it/blog/inline-svg-vs-img). Per questa diagnosi controlla l'elemento inserito nella riga HTML, invece di presumere che ogni file SVG sia incorporato allo stesso modo.

## Perché la linea di base può lasciare spazio sotto

Le righe di testo hanno bisogno di spazio per le lettere che scendono sotto la linea di base, come `g` e `p`. Una grafica inline può allinearsi a quella linea mentre la riga che la contiene si estende ancora più in basso. Ecco perché azzerare il margine dell'immagine potrebbe non cambiare nulla.

Le [regole CSS per il calcolo dell'interlinea](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) determinano il riquadro di una riga a partire dai riquadri che vi partecipano e dal loro allineamento. Font e interlinea dell'elemento padre contribuiscono anche quando il contenuto visibile è una grafica. La striscia esatta dipende quindi dagli stili circostanti, anziché da un margine SVG fisso.

Non confondere questa linea di base con quella delle lettere disegnate *dentro* l'SVG. Cambiare `dominant-baseline` su un elemento di testo SVG riguarda quelle lettere interne. Non stabilisce come l'intera grafica si posiziona nella sua riga HTML.

### Un esempio misurato senza area SVG vuota

Abbiamo creato una pagina HTML originale contenente tre copie dello stesso SVG. Ciascun SVG ha un viewBox `240 × 100` riempito da un rettangolo da bordo a bordo e viene visualizzato a `240 × 100` pixel CSS. Le righe usano Arial a `40px` con un'interlinea di `48px`. Cambia soltanto la modalità di visualizzazione o l'allineamento dell'SVG.

Il browser ha restituito queste misure degli elementi:

| Trattamento dell'SVG                 | Altezza SVG | Altezza riga | Spazio sotto il riquadro SVG |
| ------------------------------------ | ----------- | ------------ | ---------------------------- |
| Inline, allineato alla linea di base | 100px       | 110,5px      | 10,5px                       |
| Visualizzazione a blocco             | 100px       | 100px        | 0px                          |
| Inline, allineato in basso           | 100px       | 100px        | 0px                          |

![Confronto nel browser dello stesso SVG pieno: una striscia di 10,5 pixel sotto la versione inline sulla linea di base e nessuna striscia nelle versioni a blocco e allineata in basso](https://perfectvector.com/blog/inline-svg-baseline-gap/line-box-comparison.webp)

*Il rettangolo disegnato riempie ogni SVG. La striscia color pesca sotto il primo riquadro verde appartiene alla riga HTML, non a spazio aggiuntivo nel viewBox.*

Sono misure ottenute da questa pagina in un solo browser, non la promessa di uno spazio di 10,5px in ogni impaginazione. Abbiamo confrontato la coordinata inferiore del contenitore con quella dell'SVG. L'altezza dell'SVG è rimasta di 100px in tutti e tre i casi, quindi la correzione non ha ridotto né ritagliato il disegno.

## Usa la visualizzazione a blocco per una grafica autonoma

Quando il logo deve occupare una propria riga, applica la regola di impaginazione a quella specifica immagine:

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

Il [riferimento MDN per display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) distingue la partecipazione a blocco da quella inline nel flusso di impaginazione. Rendere l'SVG un blocco elimina il suo ruolo di elemento inline nella riga di testo circostante. Non modifica i tracciati sorgente e non rimuove i margini trasparenti della grafica.

Ricontrolla il contenitore dopo aver applicato la regola. Se si estende ancora sotto l'immagine, cerca un'altezza esplicita, padding, un altro elemento figlio, uno pseudoelemento o una riga aggiuntiva. Un'interruzione di riga o un nodo di testo dopo una grafica a blocco possono introdurre contenuto proprio. Anche un elemento antenato può essere responsabile dello spazio visibile.

Mantieni il selettore circoscritto. Applicare `svg { display: block; }` a un intero sito può spostare icone che appartengono intenzionalmente a etichette o frasi. Scegli il componente che richiede una grafica autonoma, poi controllane gli altri utilizzi.

## Mantieni inline la grafica accanto al testo e scegli l'allineamento

Per un'icona o un piccolo marchio accanto alle parole, mantenere l'elemento inline può essere la disposizione desiderata. `vertical-align: bottom` allinea il bordo inferiore del margine con il fondo della riga. `vertical-align: middle` usa la linea di base e l'altezza della x del genitore; non è un comando per centrare geometricamente ogni immagine in qualsiasi contenitore. Consulta le [definizioni MDN di vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align).

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

Scegli tra questi valori osservando l'etichetta e il font effettivi. Un'icona che tocca il fondo della riga può apparire troppo bassa accanto alle maiuscole. Un marchio allineato con `middle` può richiedere comunque una correzione ottica perché la grafica visibile è distribuita in modo irregolare all'interno del proprio riquadro.

Il caso allineato in basso del nostro esempio conteneva soltanto la grafica. Dimostra che quell'allineamento ha eliminato la striscia in quella specifica riga. Non stabilisce che ogni riga mista di testo e icona avrà la stessa altezza o lo stesso aspetto.

Evita di usare `line-height: 0` su un contenitore condiviso con testo come prima correzione. Cambia sia l'impaginazione del testo sia la spaziatura dell'immagine. Può nascondere il sintomo immediato lasciando il componente dipendente da successive sovrascritture quando qualcuno aggiunge un'etichetta. Scegli la modalità di visualizzazione o l'allineamento desiderati prima di cambiare la tipografia del genitore.

## Verifica la correzione senza modificare la grafica

Apporta una modifica alla volta, poi controlla:

1. **Confine dell'elemento:** lo spazio visibile si trova ora dentro o fuori dal riquadro SVG?
2. **Dimensioni:** l'SVG ha conservato larghezza, altezza e proporzioni previste?
3. **Elementi vicini:** etichette, collegamenti e icone si trovano ancora nella posizione corretta?
4. **Impaginazione responsive:** il componente si comporta correttamente alle larghezze strette e ampie?
5. **Stili calcolati:** prevale la dichiarazione prevista oppure una regola più specifica la sovrascrive?

Per un semplice contenitore senza bordi o padding, confrontare la sua coordinata inferiore con quella dell'immagine è un controllo utile. In un componente reale considera il padding intenzionale e gli altri contenuti prima di definire un errore quella differenza.

Se la pagina richiede una disposizione diversa sugli schermi più piccoli, verifica anche quella. Una correzione valida per un logo isolato potrebbe non essere adatta a una riga di navigazione con testo che va a capo. Rimuovi i colori di sfondo temporanei una volta individuato il confine.

## Quando la vettorizzazione aiuta questo processo

In questo caso un SVG già esistente e modificabile richiede di solito una correzione CSS o dell'area di disegno. Conserva quel file e diagnostica il suo posizionamento prima di ricostruirlo.

Se il marchio esiste soltanto come PNG o JPG e servono contorni modificabili, [usa PerfectVector per convertire l'immagine sorgente in grafica vettoriale](https://perfectvector.com/it/image-to-vector), poi controlla contorno, aperture e area di disegno sorgente prima di inserire il risultato nella pagina. La [scheda di valutazione della qualità del ricalco](https://perfectvector.com/it/blog/evaluate-vector-trace-quality) aiuta con questo controllo separato della geometria. La vettorizzazione prepara le forme; il CSS della pagina continua a controllare il riquadro della riga HTML.

## Domande frequenti

**Perché margin: 0 non elimina lo spazio sotto il mio SVG?**
Lo spazio può appartenere alla riga di testo che lo contiene anziché ai margini dell'SVG. Controlla i confini dell'SVG e del contenitore, poi prova la visualizzazione a blocco per un'immagine autonoma o un allineamento verticale adatto per una grafica inline.

**display: block ritaglia lo spazio vuoto dall'SVG?**
No. Cambia il modo in cui l'elemento partecipa all'impaginazione HTML. Lo spazio vuoto all'interno del viewBox rimane e richiede un controllo separato della grafica o dell'adattamento.

**Devo usare vertical-align: bottom o middle?**
Usa il valore adatto alla riga effettiva. Bottom si allinea al fondo della riga; middle usa la linea di base e l'altezza della x del genitore. Controlla il risultato con il font definitivo e il testo vicino, invece di considerare uno dei due valori un centraggio universale.

## Fonti

1. [W3C — Interlinea CSS e allineamento verticale](https://www.w3.org/TR/CSS22/visudet.html#inline-formatting) — Come i riquadri partecipanti, l'allineamento e la tipografia del genitore contribuiscono all'altezza della riga.
2. [MDN — display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) — La distinzione tra partecipazione a blocco e inline nel flusso di impaginazione.
3. [MDN — vertical-align](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align) — Allineamento alla linea di base, in basso e al centro, e riquadri ai quali si applica la proprietà.

***

Parti da un marchio disponibile solo come raster? [Prepara forme SVG modificabili](https://perfectvector.com/it/image-to-vector), confronta i loro contorni e l'area di disegno con la sorgente, poi verifica il posizionamento dell'SVG nel componente effettivo della pagina.

## Explore

- [Read the HTML article](https://perfectvector.com/it/blog/inline-svg-baseline-gap)
- [Evita salti di layout del logo SVG riservando spazio](https://perfectvector.com/it/blog/svg-logo-layout-reservation.md)
- [Logo SVG in modalità scura: scegli chi controlla i colori](https://perfectvector.com/it/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)