Pourquoi dans le code suivant la hauteur de la div
est plus grande que la hauteur de la img
? Il y a une lacune sous l’image, mais elle ne semble pas être un remplissage / une marge.
Quelle est l’écart ou l’espace supplémentaire sous l’image?
#wrapper { border: 1px solid red; width:200px; } img { width:200px; }
Par défaut, une image est rendue en ligne, comme une lettre.
Il se trouve sur la même ligne que a, b, c et d.
Il y a de la place au-dessous de cette ligne pour les descendeurs que vous trouvez sur des lettres comme f, j, p et q.
Vous pouvez ajuster l’ vertical-align
de l’image pour le positionner ailleurs (par exemple au middle
) ou modifier l’ display
pour qu’il ne soit pas aligné.
Une autre option proposée ici est de définir le style de l’image comme style="display: block;"
Pour supprimer l’écart sous l’image , vous pouvez:
vertical-align: bottom;
vertical-align: top;
ou vertical-align: middle;
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;}
No fix:
With vertical-align:bottom; on image:
With display:block; on image:
On peut également annuler la hauteur de ligne du parent:
#wrapper { line-height: 0; }
Tous les correctifs: http://jsfiddle.net/FaPFv/
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; }
Vous pouvez utiliser plusieurs méthodes pour ce problème comme
Utilisation line-height
#wrapper { line-height: 0px; }
Utilisation de l’ display: flex
#wrapper { display: flex; } #wrapper { display: inline-flex; }
Utilisation de display:
block
, table
, flex
et inherit
#wrapper img { display: block; } #wrapper img { display: table; } #wrapper img { display: flex; } #wrapper img { display: inherit; }
J’ai trouvé que cela fonctionne très bien en utilisant 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;}
Image title Image title Image title Image title Image title Image title
J’ai utilisé line-height:0
et cela fonctionne très bien pour moi.
Je viens d’append du float:left
pour div et ça a fonctionné