Rimuovi lo spazio bianco sotto l’immagine

Solo in Firefox le mie anteprime video visualizzano misteriosi 2-3 pixel di spazio bianco tra la parte inferiore dell’immagine e il bordo (vedi sotto).

Ho provato tutto quello che riesco a pensare in Firebug senza fortuna.

Come posso rimuovere questo spazio bianco?

Screenshot che mostra lo spazio bianco sotto l'immagine

Stai vedendo lo spazio per i discendenti (i bit che pendono dal fondo di ‘y’ e ‘p’) perché img è un elemento in linea per impostazione predefinita. Questo rimuove il divario:

 .youtube-thumb img { display: block; } 

È ansible utilizzare il codice sottostante se non si desidera modificare la modalità blocco:

 img{vertical-align:text-bottom} 

Oppure puoi usare seguendo come suggerisce Stuart:

 img{vertical-align:bottom} 

Se desideri conservare l’immagine come inline, puoi mettere vertical-align: top o in vertical-align: bottom . Di default è allineato sulla linea di base quindi i pochi pixel sottostanti.

Ho creato un JSFiddle per testare diverse soluzioni a questo problema. Basato sui criteri [vaghi] di

1) Massima flessibilità

2) Nessun comportamento strano

La risposta accettata qui di

 img { display: block; } 

che è raccomandato da molte persone (come in questo eccellente articolo ), in realtà è al quarto posto.

1 °, 2 ° e 3 ° posto sono tutti un trappola tra queste tre soluzioni:

1) La soluzione fornita da @Dave Kok e @Hasan Gursoy:

 img { vertical-align: top; } /* or bottom */ 

professionisti:

  • Tutti i valori di visualizzazione funzionano sia su genitore che su img.
  • Nessun comportamento molto strano; tutti i fratelli della img cadono dove ci si aspetterebbe che loro.
  • Molto efficiente.

contro:

  • Nel caso [perfettamente valido] sia di genitore che di img aventi `display: inline`, il valore di questa proprietà può determinare la posizione del genitore di img (un po ‘strano).

2) Impostazione font-size: 0; sull’elemento genitore:

 .parent { font-size: 0; vertical-align: top; } .parent > * { font-size: 16px; vertical-align: top; } 

Dal momento che questo [tipo di] richiede vertical-align: top alla img , questa è fondamentalmente un’estensione della prima soluzione.

professionisti:

  • Tutti i valori di visualizzazione funzionano sia su genitore che su img.
  • Nessun comportamento molto strano; tutti i fratelli della img cadono dove ci si aspetterebbe che loro.
  • Risolve il problema degli spazi bianchi in linea per qualsiasi fratello della img.
  • Anche se questo sposta ancora la posizione del genitore nel caso di genitore e img entrambi aventi `display: inline`, almeno non puoi più vedere il genitore.

contro:

  • Codice meno efficiente
  • Questo presuppone il markup “corretto”; se img ha fratelli di nodes di testo, non verranno visualizzati.

3) Impostazione line-height: 0 sull’elemento genitore:

 .parent { line-height: 0; vertical-align: top; } .parent > * { line-height: 1.15; vertical-align: top; } 

Simile alla seconda soluzione in quanto, per renderlo completamente flessibile, diventa fondamentalmente un’estensione del 1 °.

professionisti:

  • Comportamenti come le prime due soluzioni su tutte le combinazioni di visualizzazione tranne quando genitore e img hanno `display: inline`.

contro:

  • Codice meno efficiente
  • Nel caso in cui sia genitore che img abbiano `display: inline`, otteniamo ogni sorta di follia. (Forse giocare con la proprietà `line-height` non è la migliore idea …)

Così il gioco è fatto. Spero che questo aiuti qualche povera anima.

Ho trovato questa domanda e nessuna delle soluzioni ha funzionato per me. Ho trovato un’altra soluzione che ha eliminato le lacune sotto le immagini in Chrome. Ho dovuto aggiungere l’ line-height:0; al selettore img nel mio CSS e le lacune sotto le immagini sono andate via.

Pazzo che questo problema persista nei browser nel 2013.

Aveva questo problema, trovato la soluzione perfetta altrove se non vuoi usare il blocco basta aggiungere

 img { vertical-align: top } 
 .youtube-thumb img {display:block;} or .youtube-thumb img {float:left;} 

Dai l’altezza del div .youtube-thumb all’altezza dell’immagine. Questo dovrebbe risolvere il problema nel browser Firefox.

 .youtube-thumb{ height: 106px } 

Come affermato in precedenza, l’immagine viene trattata come testo, quindi il fondo è adatto a chi è noioso: “p, q, y, g, j”; la soluzione più semplice è assegnare il display img: block; nel tuo css.

Ma questo inibisce il comportamento dell’immagine standard di fluire con il testo. Per mantenere quel comportamento ed eliminare lo spazio. Raccomando di avvolgere l’immagine con qualcosa di simile.