Perché il contenitore div insiste per essere leggermente più grande del contenuto IMG o SVG?

Sto provando a produrre un altro lightbox come pratica HTML/CSS/Javascript tanto necessaria, ma ho riscontrato un problema di stile che sembra banale (e probabilmente lo è!) Ma non riesco a risolverlo.Perché il contenitore div insiste per essere leggermente più grande del contenuto IMG o SVG?

Ho un div che contiene uno img. Non importa cosa provo (border, margin, padding, altezza automatica, ecc.) Non riesco a rendere lo div stretto per abbinare le dimensioni dell'immagine. Ho ridotto il problema a questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
     <title>Layout experiments</title> 

     <style type="text/css"> 
      #lightbox { 
       margin: 0; 
       padding: 0; 
       position : fixed; 
       left  : 50%; 
       margin-left : -320px; 
       top   : 100px; 
       border-radius: 22px; 
       background : #e0e0f0; 
       color  : #102020; 
      } 

      #lightbox img { 
       border-radius: 15px; 
      } 
      .imagebg { 
       margin  : 7px; 
       background : black; 
       border-radius: 15px; 
       height  : 100%; 
      } 

     </style> 

    </head> 
    <body> 

     <div id="lightbox"> 
      <div class="imagebg"> 
       <img src="picture.jpg"> 
      </div> 
     </div> 
    </body> 
</html>

'picture.jpg' è 640x400, ma il div contenitore vuole essere 640x404, la differenza mostrandosi come una striscia nera sotto l'immagine. Il div esiste in modo tale che io possa sfumare l'immagine in nero mescolando la sua opacità fino a 0, scambiarla, quindi ricomporla.

Ho guardato gli stili calcolati in più browser e non riesco a vedere dove il delta 4px proviene da.

fonte

2012-06-20 Chris

Cercando aggiungendo:

img { display: block; }

al vostro CSS. Poiché uno <img> è un elemento in linea per impostazione predefinita, la sua altezza viene calcolata in modo diverso in base al valore di altezza riga predefinito.

Negli elementi in linea, la proprietà CSS altezza riga specifica l'altezza utilizzata nel calcolo dell'altezza del riquadrato.

Su elementi a livello di blocco, l'altezza della linea specifica l'altezza minima delle caselle di riga all'interno dell'elemento.

Fonte

: https://developer.mozilla.org/en/CSS/line-height

fonte

2012-06-20 19:23:28 sbeliv01

che fa davvero risolvere il problema. Potresti spiegare perché fa la differenza? (Non mi sto impegnando ad accettare - SO non mi lascerà attendere altri 11 minuti) – Chris

@Chris - è la ragione per cui ti ho dato: il 'img' ha un' line-height' implicito assegnato ad esso , che gli dà un po 'di respiro verticale.Poiché 'line-height' si applica solo agli elementi' inline', l'impostazione di 'img' su' display: block' rimuove 'line-height'. –

@Joseph - Non avevo visto la tua risposta quando ho fatto la richiesta di cui sopra. Dal momento che sostanzialmente stanno ottenendo esattamente la stessa cosa direttamente e indirettamente, non c'è molto da scegliere tra le risposte. Sembra giusto accettare la risposta che è arrivata prima, ma grazie per la tua spiegazione. – Chris

L'immagine sta usando la line-height del suo genitore. Prova questo:

.imagebg { line-height: 0 }

fonte

2012-06-20 19:24:29

Fondamentalmente si stanno ottenendo questo errore su IE, se hve non ha citato, ma questo è il fatto. IE genera uno spazio aggiuntivo sotto il tag <img>. Quindi è una buona pratica per rendere le immagini img { display: block; }.

EDIT: Si può dire che è un bug di IE

fonte

2012-06-20 19:27:57 Subhajit

Non ho menzionato IE perché non lo sto usando. Safari, Chrome e Firefox dimostrano tutti lo stesso comportamento. Entrambe le risposte di Joseph e di sbeliv01 funzionano. – Chris

Non è un bug di IE. Tutti gli sono allineati verticalmente per linea di base per impostazione predefinita. (allineamento verticale: linea di base), che significa che il loro punto più basso è allineato con la linea di base del font (il punto più basso del cerchio nella lettera 'p', per esempio). Per modificare questo, è necessario solo impostare un diverso modo di allinearlo, ad esempio, allineamento verticale: superiore; o allineamento verticale: inferiore ;. Non è necessario convertire in un elemento di blocco, poiché le sue proprietà intrinseche inline potrebbero essere utili. – CaspianRoach

Se non si desidera cambiare display dell'elemento, provare

margin-bottom: -4px;

fonte

2016-10-03 06:59:38

prova ad aggiungere:

vertical-align: middle;

Questo è utilizzato nel materiale di design google per eliminare lo scarto tra audio, canvas, iframe, immagini, video e il fondo dei loro contenitori.

Material Design Lite: https://getmdl.io

Github discussione: https://github.com/h5bp/html5-boilerplate/issues/440

fonte

2017-03-30 12:23:14 MindInvader

Perché il contenitore div insiste per essere leggermente più grande del contenuto IMG o SVG?

risposta

Problemi correlati