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

Ciao stefy,
la tua domanda non è proprio pertinente a questo articolo... ti consiglio di dare …

stefy

salve. ho un problema sulla pagina facebook..non riesco a unirla..mi dice che è in sospeso …

Michele

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?

Antonio

Grazie michele per la velocità con cui hai risposto, comunque ho seguito la tua guida passo per …