L'image à l'intérieur du div a un espace supplémentaire sous l'image

503

Pourquoi dans le code suivant la hauteur du divest plus grande que la hauteur du img? Il y a un espace sous l'image, mais il ne semble pas y avoir de remplissage / marge.

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 avec un espace ou un espace blanc en dessous

Misha Moroshko
la source
10
Voici une réponse courte et complète à cette question: stackoverflow.com/a/31445364/3597276
Michael Benjamin
1
Voici une bonne lecture de ce problème: The Strange <img> Gap In HTML
Matheus Avellar

Réponses:

601

Par défaut, une image est rendue en ligne, comme une lettre, de sorte qu'elle se trouve sur la même ligne que a, b, c et d.

Il y a un espace sous cette ligne pour les descendants que vous trouvez sur des lettres comme g, j, p et q.

Démonstration de descendeurs

Vous pouvez:

  • ajustez l' vertical-alignimage pour la positionner ailleurs (par exemple le middle) ou
  • changez le displayafin qu'il ne soit pas en ligne.

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}
<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>


L'image incluse est du domaine public et provient de Wikimedia Commons

Quentin
la source
9
Pour être plus précis, cela se produit b / c les éléments en ligne occupent l'espace de leur courant line-height. Le réglage line-heightà la dimension souhaitée permettrait également de surmonter l'espace blanc indésirable.
Kevin Boucher
3
"F" est-il qualifié de descendant?
j08691
2
@ j08691 - Dépend de la police.
Quentin
134

Une autre option suggérée ici consiste à définir le style de l'image commestyle="display: block;"

Le A
la source
4
Merci. Cela a également résolu un problème similaire avec l'espace sous un film flash. (affichage ajouté: bloc à incorporer / balises d'objet)
jessieloo
5
ou inline-blocksi vous souhaitez qu'il s'affiche en ligne comme le font normalement les images.
Ian
6
@Ian @Imperative inline-blockne semble pas fonctionner.
p.matsinopoulos
93

Solution rapide:

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

  • Définissez la propriété d' alignement vertical de l'image sur vertical-align: bottom; vertical-align: top;ouvertical-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:


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

L'écart 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 ( voir Éléments remplacés MDN ). Cela leur permet "d'agir comme une image" et d'avoir leurs propres dimensions intrinsèques, rapport hauteur / largeur ....
Les navigateurs calculent leur propriété d'affichage inlinemais ils leur donnent un comportement spécial qui les rapproche des inline-blockéléments (comme vous pouvez les aligner verticalement, donner leur une hauteur, marge haut / bas et rembourrage, transforme ...).

Cela signifie également que:

<img>n'a pas de ligne de base, donc lorsque les images sont utilisées dans un contexte de mise en forme en ligne avec alignement vertical: ligne de base, le bas de l'image sera placé sur la ligne de base du texte.
( source: MDN , c'est moi qui souligne )

Comme les navigateurs calculent par défaut la propriété d'alignement vertical sur la ligne de base, il s'agit du comportement par défaut. L'image suivante montre l'emplacement de la ligne de base sur le texte:

Emplacement de la ligne de base sur le texte ( Source de l'image )

Les éléments alignés sur la ligne de base doivent garder de l'espace pour les descendants qui s'étendent sous 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;font-size:30px;}
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 <img>balise crée un espace au bas de son conteneur et pourquoi la modification de la propriété d'alignement vertical ou de la propriété d'affichage 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>

web-tiki
la source
C'est pourquoi la définition de la taille de police à 0 ne fonctionne pas. ou est-ce?
Persijn
2
@Persijn c'est le cas. Comme le réglage, line-height:0;mais je ne considère pas cela comme une bonne solution de contournement par rapport à la modification des propriétés d'alignement vertical ou d'affichage
web-tiki
2
Notez cependant que certains navigateurs ne respectent pas font-size:0: ils définissent la taille de police sur la taille minimale dans les paramètres utilisateur.
M. Lister
Oui, cela semble un espace blanc.
mrbengi
eh bien, je pense que la middle text-top sub superposition dans l'image n'est pas correcte.
xianshenglu
40

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

#wrapper {
  line-height: 0;
}

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

Pavlo
la source
5
ATTENTION! cela supprimera également tous les nœuds de texte dans #wrapper. car il sera hérité. Mais des points bonus pour ce super violoneux! ici, il est mis à jour avec des nœuds de texte. jsfiddle.net/FaPFv/30
gcb
Sinon, taille de la police: 0
Kiran
13

Il vous suffit d'attribuer cette propriété:

img {
    display: block;
}

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

img {
    display: inline;
}
Daniel Díaz
la source
7

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

  1. En utilisant line-height

    #wrapper {  line-height: 0px;  }
  2. En utilisant display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
  3. En utilisant display: block, table, flexetinherit

    #wrapper img {  display: block;    }
    #wrapper img {  display: table;    }
    #wrapper img {  display: flex;     }
    #wrapper img {  display: inherit;  }
Santosh Khalse
la source
Veuillez ne pas recommander le line-heighthack très bâclé , ou au moins expliquer clairement pourquoi c'est la pire "solution" de toutes: au moment où quelqu'un met du texte à côté de l'image (en particulier plusieurs lignes préformatées avec des balises BR), ils se retrouveront dans une situation pire qu’au départ.
Sz.
5

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

Abdulla khan
la source
Désolé, -1: cela gâche le positionnement du texte, donc si quelqu'un place également du texte (en particulier multi-lignes, par exemple <BR>) à côté de l'image, il y aura un désordre mal placé, superposé / en surplomb.
Sz.
3

J'ai trouvé que cela fonctionne très bien en utilisant display: block; sur l'image et alignement vertical: haut; 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 modifier le code d'un JS FIDDLE

Timothée
la source
-1

Je viens d'ajouter float:leftà div et cela a fonctionné

TomoMiha
la source
9
C'est parce que la mise en float:leftcausedisplay:block
Kevin Boucher