Pourquoi le conteneur div insiste-t-il pour être légèrement plus grand que le contenu IMG ou SVG?

J’essaie de produire encore une autre lightbox aussi pratique HTML / CSS / Javascript, mais j’ai rencontré un problème de style qui est sortingvial (et c’est probablement le cas!) Mais je ne peux pas le résoudre.

J’ai un div qui contient un img . Peu importe ce que j’essaie ( border , margin , padding , hauteur automatique, etc.), je ne parviens pas à réduire la div en fonction des dimensions de l’image. J’ai réduit le problème à ceci:

     Layout experiments  #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%; }       

‘https://stackoverflow.com/questions/11126685/why-does-container-div-insist-on-being-slightly-larger-than-img-or-svg-content/picture.jpg’ est 640×400, mais le div du conteneur veut être 640×404, la différence se présentant comme une bande noire sous l’image. Le div existe pour que je puisse faire disparaître l’image en noir en fusionnant son opacité à 0, en l’échangeant, puis en le fusionnant.

J’ai examiné les styles calculés dans plusieurs navigateurs et je ne vois pas d’où vient le delta 4px.

Essayer d’append:

 img { display: block; } 

à votre CSS. Un étant un élément inline par défaut, sa hauteur est calculée différemment par rapport à la valeur de hauteur de ligne par défaut.

Sur les éléments en ligne, la propriété CSS line-height spécifie la hauteur utilisée dans le calcul de la hauteur de la zone de ligne.

Sur les éléments de niveau bloc, la hauteur de ligne spécifie la hauteur minimale des zones de ligne dans l’élément.

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

Votre image utilise la hauteur de ligne de son parent. Essaye ça:

 .imagebg { line-height: 0 } 

essayez d’append:

 vertical-align: middle; 

Ceci est utilisé dans Google Material Design Lite pour éliminer le fossé entre l’audio, la canvas, les iframes, les images, les vidéos et le fond de leurs conteneurs.

Material Design Lite: https://getmdl.io

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

Fondamentalement, vous obtenez cette erreur sur IE, même si vous n’avez pas mentionné, mais c’est le fait. IE génère un espace supplémentaire sous la . D’où il est conseillé de faire les images img { display: block; } img { display: block; } .

EDIT: Vous pouvez dire que c’est un bug de IE

Si vous ne voulez pas modifier l’ display de l’élément, essayez

 margin-bottom: -4px;