Dernière mise à jour le 2 février 2023 par LMD
Dans certaines situations de composition d’images, en mosaïque notamment, lorsqu’on veut coller des éléments, il arrive que des défauts d’espace apparaissent, aussi bien en bas que sur les côtés.
L’espace sous une image dans un bloc
Quand on place une image dans un conteneur de type block, il arrive qu’un espace indésirable de quelques pixels apparaisse sous l’image.
Testez le code HTML suivant (à placer dans body), attribuez dans les css une couleur d’arrière plan gris à body et blanc à la div, et observez le phénomène, un espace blanc sous l’image :
<div class="espace_h"><img src="image.jpg" alt ="" /></div>
Cela s’explique par le fait qu’une image a le même comportement que du texte et qu’elle est alignée par défaut sur la ligne de base du texte. La partie descendante du texte (même s’il n’y en a pas), correspond à l’espace observé.
Pour le supprimer, il faut modifier l’alignement vertical de l’image par défaut, sur la valeur bottom ou middle, dans les css.
.espace_h img {
vertical-align: bottom;
}
Plus de détails sur ce phénomène en consultant le lien suivant :
https://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html
L’espace sur les côtés des blocs (white space)
Lorsqu’on utilise la propriété css inline-block pour aligner des éléments de type block à l’horizontale, il se produit un espace vertical indésirable d’environ 4 pixels entre les blocs. C’est un défaut d’interprétation des navigateurs récents, dû aux espaces présents dans le code HTML lui-même.
Testez le code HTML suivant (à placer dans body), attribuez dans les css une couleur d’arrière plan gris à body et blanc à la div, et observez le phénomène, un espace gris entre les deux images :
<div class="espace_v"><img src="image1.jpg" alt ="" /></div>
<div class="espace_v"><img src="image2.jpg" alt ="" /></div>
Il n’y a pas de moyen rationnel d’y remédier, mais plusieurs astuces.
La première solution consiste à coller le code des éléments séparés par un espace, directement dans le HTML. Ainsi, le code ci-dessus deviendrait, et le problème serait résolu :
<div class="espace_v"><img src="image1.jpg" alt ="" /></div><div class="espace_v"><img src="image2.jpg" alt ="" /></div>
C’est la solution la plus efficace et la plus sûre, mais elle rend le code inconfortable à lire. Une solution intermédiaire consiste à utiliser des commentaires HTML (ici en rouge). Cette solution fonctionne plutôt bien, à condition de prendre soin de ne taper aucun espace entre le code normal et le code du commentaire, exactement comme ci-dessous :
<div class="espace_v"><img src="image1.jpg" alt ="" /></div><!--
--><div class="espace_v"><img src="image2.jpg" alt ="" /></div>
Enfin, d’autres solutions existent, en utilisant le css. Elles sont moins fiables que les précédentes. La plus courante consiste à placer un font-size: 0; sur le parent, soit ici body :
body { font-size: 0; }
Plus de détails sur ce phénomène en consultant le lien suivant :
https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html