web-dev-qa-db-fra.com

Supprimer les espaces en dessous de l'image

Dans Firefox, seules les vignettes de mes vidéos affichent de mystérieux 2 à 3 pixels d'espace blanc entre le bas de mon image et sa bordure (voir ci-dessous).

J'ai essayé tout ce que je peux penser à Firebug sans succès.

Comment puis-je supprimer cet espace blanc?

Screenshot displaying white space below image

cssimagewhitespaceborderremoving-whitespace
237
Ryan

Vous voyez l'espace pour les descendeurs (les bits qui pendent au bas de 'y' et 'p') parce que img est un élément en ligne par défaut. Cela supprime l'écart:

.youtube-thumb img { display: block; }
485
robertc

Vous pouvez utiliser le code ci-dessous si vous ne souhaitez pas modifier le mode de blocage:

img{vertical-align:text-bottom}

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

img{vertical-align:bottom}
130
HasanG

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

29
Dave Kok

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 étrange

La réponse acceptée ici de

img { display: block; }

qui est recommandé par beaucoup de gens (comme dans cet excellent article ), occupe actuellement le quatrième rang.

La 1ère, la 2ème et la 3ème place sont un mélange entre ces trois solutions:

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

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

avantages:

  • Toutes les valeurs d'affichage fonctionnent à la fois sur le parent et sur img.
  • Pas de comportement très étrange; tous les frères et sœurs de l’img tombent là où vous vous attendez.
  • Très efficace.

les inconvénients:

  • Dans le cas [parfaitement valide] du parent et de img ayant `display: inline`, la valeur de cette propriété peut déterminer la position du parent de img (un peu étrange).

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

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

Étant donné que celui-ci requiert un peu plus de vertical-align: top sur la img, il s’agit essentiellement d’une extension de la 1ère solution.

avantages:

  • Toutes les valeurs d'affichage fonctionnent à la fois sur le parent et sur img.
  • Pas de comportement très étrange; tous les frères et sœurs de l’img tombent là où vous vous attendez.
  • Corrige le problème d'espacement en ligne pour tous les frères et soeurs de l'img.
  • Bien que cela déplace toujours la position du parent dans le cas du parent et img ayant tous deux l'affichage `display: inline`, au moins, vous ne pouvez plus voir le parent.

les inconvénients:

  • Code moins efficace.
  • Cela suppose un balisage "correct"; si img a des frères et soeurs de nœuds de texte, ils ne s'afficheront pas.

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

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

Semblable à la 2ème solution en cela, pour le rendre totalement flexible, il devient fondamentalement une extension de la 1ère.

avantages:

  • Se comporte comme les deux premières solutions sur toutes les combinaisons d’affichage, sauf lorsque parent et img ont `display: inline`.

les inconvénients:

  • Code moins efficace.
  • Dans le cas où le parent et img ont tous deux "display: inline", nous obtenons toutes sortes de folies. (Peut-être que jouer avec la propriété `line-height` n'est pas la meilleure idée ...)

Donc là vous l'avez. J'espère que cela aide une pauvre âme.

23
bowheart

J'ai trouvé cette question et aucune des solutions ici ne fonctionnait pour moi. J'ai trouvé une autre solution qui éliminait les lacunes sous les images dans Chrome. Je devais ajouter line-height:0; au sélecteur img de mon CSS et les lacunes sous les images disparurent.

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

10
ZivBK1

Avait ce problème, trouvé la solution parfaite ailleurs si vous ne voulez pas utiliser le blocage, ajoutez simplement

img { vertical-align: top }
7
Andrew
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
5
Brynner Ferreira

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

.youtube-thumb{ height: 106px }
0
Mahesh

Comme indiqué précédemment, l'image est traitée en tant que texte. Le bas de la page doit en tenir compte: "p, q, y, g, j"; La solution la plus simple consiste à attribuer l’affichage img: block; dans vos css.

Mais cela empêche le comportement standard de l'image de suivre le texte. 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>
0
Mardok