web-dev-qa-db-fra.com

Image dans div a un espace supplémentaire en dessous de l'image

Pourquoi dans le code suivant la hauteur de la div est supérieure à la hauteur de la img? Il y a un espace sous l'image, mais il ne semble pas y avoir de marge/remplissage.

Quel est l'espace ou l'espace supplémentaire sous l'image? 

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Image with a gap or white space under it

htmlcssimage
445
Misha Moroshko

Par défaut, une image est rendue en ligne, comme une lettre.

Il est assis sur la même ligne que les sièges a, b, c et d.

Il y a un espace en dessous de cette ligne pour les descendeurs que vous trouvez sur des lettres telles que f, j, p et q.

Vous pouvez ajuster le vertical-align de l'image pour la positionner ailleurs (par exemple, le middle) ou modifier le display afin qu'il ne soit pas en ligne.

525
Quentin

Une autre option suggérée ici définit le style de l'image comme style="display: block;"

126
Thea

Solution rapide:

Pour supprimer l’espace sous l’image , vous pouvez:

  • Définissez la propriété vertical-align de l'image sur vertical-align: bottom;vertical-align: top; ou vertical-align: middle;
  • Définissez la propriété d'affichage de l'image sur display:block;

Voir le code suivant pour une démonstration en direct:

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

Explication: pourquoi y a-t-il un espace sous l'image?

L'espace ou l'espace supplémentaire sous l'image n'est pas un bug ou un problème, c'est le comportement par défaut. La cause première est que les images sont des éléments remplacés (see MDN et W3C). Cela leur permet de "se comporter comme une image" et d’avoir leurs propres dimensions intrinsèques, leur rapport de format, etc.
Les navigateurs calculent leur propriété d’affichage sur inline mais leur attribuent un comportement spécial qui les rapproche des éléments inline-block (vous pouvez les aligner verticalement en leur donnant une hauteur supérieure/inférieure). marge et rembourrage, transforme ...).

Cela signifie également que:

[...] lorsque les images sont utilisées dans un contexte de formatage en ligne avec vertical-align: baseline, , le bas de l'image sera posé sur la ligne de base du conteneur . (source: MDN , c'est moi qui souligne)

Comme les navigateurs calculent par défaut la propriété vertical-align sur baseline, il s'agit du comportement par défaut. L'image suivante montre l'emplacement de la référence sur du texte:

Location of the baseline on text

Les éléments alignés sur la ligne de base doivent conserver un espace pour les descendeurs qui s'étendent en dessous de la ligne de base (comme j, p, g ...), comme vous pouvez le voir dans l'image ci-dessus. Dans cette configuration, le bas de l'image est aligné sur la ligne de base comme vous pouvez le voir dans cet exemple:

div{border:1px solid red;}
img{width:100px;height:auto;}
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

C'est pourquoi le comportement par défaut de la balise <img> crée un espace au bas de son conteneur et pourquoi la modification de la propriété vertical-align ou de la propriété display le supprime comme dans la démo suivante:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}
<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
85
web-tiki

On peut également annuler la hauteur de ligne du parent:

#wrapper {
  line-height: 0;
}

Tous les correctifs: http://jsfiddle.net/FaPFv/

37
Pavlo

Tout ce que vous avez à faire est d’affecter cette propriété:

img {
    display: block;
}

Les images par défaut ont cette propriété:

img {
    display: inline;
}
9
Daniel Díaz

Vous pouvez utiliser plusieurs méthodes pour ce problème, comme

  1. Utiliser line-height

    #wrapper {  line-height: 0px;  }

  2. Utiliser display: flex

    #wrapper {  display: flex;         }
#wrapper {  display: inline-flex;  }

  3. Utilisation de display:block, table, flex et inherit

    #wrapper img {  display: block;    }
#wrapper img {  display: table;    }
#wrapper img {  display: flex;     }
#wrapper img {  display: inherit;  }
6
Santosh Khalse

J'ai utilisé line-height:0 et cela fonctionne bien pour moi.

4
Abdulla khan

J'ai trouvé que cela fonctionnait très bien avec display: block; sur l'image et vertical-align: top; sur le texte.

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}
<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

ou vous pouvez éditer le code a JS FIDDLE

3
Timothy