MICHELEPISANI.IT
  • Design
  • CSS
  • Articoli
  • 3 modi per rimuovere lo spazio sotto alle immagini con i CSS
 

Con line-height, display o vertical-align

3 modi per rimuovere lo spazio sotto alle immagini con i CSS

css rimuovere spazio sotto immagine
Aprile 14
07:542016

Per impostazione predefinita le immagini sul web sono rappresentate o meglio dire posizionate sulla stessa line come se fossero lettere. Pertanto la base dell'immagine poggerà alla stessa altezza su cui poggiano lettere ascendenti come la a, la d, la s, ecc... tuttavia per garantire lo stesso ingombro occupato dalle lettere discendenti quali ad esempio la j, la g, ecc... viene assegnato all'immagine stessa uno spazio vuoto il quale può risultare antiestetico qualora si lavorasse, per dirne una, con un mosaico di immagini.
Il problema in questione è evidenziato dall'immagine seguente (Fig. 1):

CSS - Rimuovere spazio sotto alle immagini
Fig. 1 - CSS - Rimuovere spazio sotto alle immagini



Per ovviare a questa situazione con i CSS è possibile agire in 3 modi:

1) Assegnare una dichiarazione line-height al contenitore dell'immagine:

.contenitore {line-height: 0;}


2) Assegnare la dichiarazione display:block all'immagine:

.contenitore img {display: block;}


3) Modificare il vertical-align per posizionare l'immagine ad un'altra altezza:

.contenitore img {vertical-align: bottom;}


Un esempio con cui potete testare direttamente il risultato è presente sul seguente JSFiddle, in anteprima incorporato di seguito:

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Grazie Paolo,
spero possa tornarti utile per i tuoi scopi.

Paolo

salve,mi interessa il progetto sensore gas ,per applicazioni in agricoltura.Vedremo gli …

Michele Pisani

Ciao Rossana,
strano problema, una domanda: continui a visualizzare entrambe le pagine o una …

Rossana

Ciao Michele, il mio problema è che Facebook non mi risponde. Mi è successo tre volte: faccio …