143 votes

HTML 5 étrange img ajoute toujours une marge de 3 pixels au bas

Lorsque je change de site pour

<!DOCTYPE HTML>

Chaque élément img est encapsulé à l'intérieur d'un DIV a une 3px marge inférieure, même si la marge n'est pas définie dans le CSS. En d'autres termes, il n'y a pas d'attributs de style qui sont à l'origine de ce 3px la marge du bas.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Maintenant, disons haha.jpg est 50x50, et .espace réservé est mis à display: table. Étrangement les dimensions de hauteur de .espace réservé dans mon observation est 50x53...

Quelqu'un a rencontré cette anomalie avant et il fixe?

MODIFIER

Voici le JS FIDDLE

http://jsfiddle.net/fRpK6/

25voto

SpliFF Points 21945

Je résous souvent ce problème en donnant à l'élément d'image display:block ou display:inline-block selon les cas.

6voto

oytunyuksel Points 1

c'est résolu mon problème.

 line-height: 0;
 

3voto

Doug Keeling Points 36

Je crois la mise

 line-height: 1;
 

sur l'image va également résoudre ce problème, surtout si c'est dans un bloc par lui-même.

1voto

pantryfight Points 124

Je ne suis pas sûr de l'explication exacte de la raison, mais donnez à votre espace réservé div font-size: 0px;

 .placeholder {
    font-size: 0px;
}
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X