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

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

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

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

Ciao Erika, in questo caso è sicuramente condizione essenziale che le due pagine vengano associate …

Erika

Buonasera Michele, a me appare l'errore che fanno parte di account business diversi; come posso …

Giulia

Buonasera Michele, ho lo stesso identico problema di Giuseppe. Inoltre non ho nessuna possibilità …

Giuseppe

Sto provando da diversi mesi ad unire due pagine. Faccio tutta la procedura correttamente e alla …