Supprimer l'espace blanc en dessous de l'image [dupliquer]

vous pouvez utiliser le code ci-dessous si vous ne voulez pas modifier le mode bloc:

img{vertical-align:text-bottom}

ou vous pouvez utiliser ce qui suit comme Stuart le suggère:

img{vertical-align:bottom}

Si vous souhaitez préserver l'image en ligne, vous pouvez mettre vertical-align: top ou vertical-align: bottom . Par défaut, il est aligné sur la ligne de base d'où les quelques pixels en dessous.

j'ai mis en place un JSFiddle pour tester plusieurs solutions différentes à ce problème. Basé sur les critères [vagues] de

1) flexibilité maximale

2) pas de comportement bizarre

la réponse acceptée ici de

img { display: block; }

ce qui est recommandé par beaucoup de gens (comme dans cette excellente article ), se classe en fait quatrième.

1ère, 2ème, et 3ème place sont tous un tirage au sort entre ces trois solutions:

1) la solution donnée par @Dave Kok et @Hasan Gursoy:

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

pour:

• toutes les valeurs d'affichage fonctionnent à la fois sur le parent et img.
• aucun comportement très étrange; tous les frères et sœurs de l'img automne où vous vous attendez à eux.
• très efficace.

inconvénients:

• dans le cas [parfaitement valide] où le parent et img ont tous deux `display: inline`, la valeur de cette propriété peut déterminer la position du parent de l'img (un peu étrange).

2) Position font-size: 0; sur l'élément parent:

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

puisque celui-ci [genre de] Nécessite vertical-align: top sur le img , il s'agit essentiellement d'une extension de la 1ère solution.

pour:

• toutes les valeurs d'affichage fonctionnent à la fois sur le parent et img.
• pas de comportement très étrange; les frères et sœurs de l'img tombent là où on s'y attend.
• fixe le en ligne problème d'espace blanc pour tous les frères et sœurs de l'img.
• bien que cela déplace encore la position du parent dans le cas du parent et img tous les deux ayant `display: inline`, au moins vous ne pouvez plus voir le parent.

inconvénients:

• Code moins efficace.
• cela suppose un balisage "correct"; si l'img a des frères de noeuds de texte, ils ne le feront pas. se montrer.

3) Position line-height: 0 sur l'élément parent:

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

similaire à la 2ème solution en ce que, pour le rendre entièrement flexible, il devient fondamentalement une extension du 1er.

pour:

• se comporte comme les deux premières solutions sur toutes les combinaisons d'affichage sauf lorsque le parent et img ont ' affichage: inline`.

inconvénients:

• Code moins efficace.
• dans le cas du parent et de l'img ayant `display: inline`, nous obtenons toutes sortes de folie. (Peut-être que jouer avec la propriété `line-height` n'est pas la meilleure idée...)

Alors voilà. J'espère que ça aidera une pauvre âme.

j'ai trouvé cette question et aucune des solutions ici ne fonctionnait pour moi. J'ai trouvé une autre solution qui a éliminé les lacunes ci-dessous des images dans Chrome. J'ai dû ajouter line-height:0; au sélecteur img dans mon CSS et les trous sous les images ont disparu.

Fou que ce problème persiste dans les navigateurs en 2013.

avait ce problème, trouvé la solution parfaite ailleurs si vous ne voulez pas que vous utilisez le bloc juste ajouter

img { vertical-align: top }

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

Donner la hauteur de la div .youtube-thumb la hauteur de l'image. Qui devrait régler le problème dans le navigateur Firefox.

.youtube-thumb{ height: 106px }

comme indiqué ci-dessus, l'image est traitée comme du texte, donc le bas est pour accommoder ceux pesky:" p,q,y,g,j"; la solution la plus facile est d'assigner l'affichage img:bloc; dans votre css.

mais cela empêche le comportement d'image standard de couler avec le texte. Pour garder ce comportement et éliminer l'espace. Je recommande d'envelopper l'image avec quelque chose comme ça.

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>