body<\/code>), attribuez dans les css une couleur d’arri\u00e8re plan gris \u00e0 body et blanc \u00e0 la div, et observez le ph\u00e9nom\u00e8ne, un espace blanc sous l’image :<\/p>\n<div class=\"espace_h\"><img src=\"image.jpg\" alt =\"\" \/><\/div><\/code><\/p>\n![\"\"](\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2017\/03\/spaces01.png\")
<\/p>\n
Cela s’explique par le fait qu’une image a le m\u00eame comportement que du texte et qu’elle est align\u00e9e par d\u00e9faut sur la ligne de base du texte. La partie descendante du texte (m\u00eame s’il n’y en a pas), correspond \u00e0 l’espace observ\u00e9.<\/p>\n
Pour le supprimer, il faut modifier l’alignement vertical de l’image par d\u00e9faut, sur la valeur bottom<\/code> ou middle, dans les css<\/code>.<\/p>\n.espace_h img {
\n<\/code>\u00a0\u00a0 vertical-align: bottom;
\n<\/code>}<\/code><\/p>\n![\"\"](\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2017\/03\/spaces02-300x237.png\")
![\"\"](\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2017\/03\/spaces03-300x237.png\")
<\/p>\n
Plus de d\u00e9tails sur ce ph\u00e9nom\u00e8ne en consultant le lien suivant :<\/p>\n
https:\/\/www.alsacreations.com\/astuce\/lire\/52-espaces-sous-les-images.html<\/p>\n
L’espace sur les c\u00f4t\u00e9s des blocs (white space)<\/h4>\n
Lorsqu’on utilise la propri\u00e9t\u00e9 css inline-block<\/code> pour aligner des \u00e9l\u00e9ments de type block \u00e0 l’horizontale, il se produit un espace vertical ind\u00e9sirable d’environ 4 pixels entre les blocs. C’est un d\u00e9faut d’interpr\u00e9tation des navigateurs r\u00e9cents, d\u00fb aux espaces pr\u00e9sents dans le code HTML lui-m\u00eame.<\/p>\nTestez le code HTML suivant (\u00e0 placer dans body<\/code>), attribuez dans les css une couleur d’arri\u00e8re plan gris \u00e0 body et blanc \u00e0 la div, et observez le ph\u00e9nom\u00e8ne, un espace gris entre les deux images :<\/p>\n<div class=\"espace_v\"><img src=\"image1.jpg\" alt =\"\" \/><\/div>
\n<div class=\"espace_v\"><img src=\"image2.jpg\" alt =\"\" \/><\/div>
\n<\/code><\/p>\n![\"\"](\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2017\/03\/espace_v_01.png\")
<\/p>\n
Il n’y a pas de moyen rationnel d’y rem\u00e9dier, mais plusieurs astuces.<\/p>\n
La premi\u00e8re solution consiste \u00e0 coller le code des \u00e9l\u00e9ments s\u00e9par\u00e9s par un espace, directement dans le HTML. Ainsi, le code ci-dessus deviendrait, et le probl\u00e8me serait r\u00e9solu :<\/p>\n
<div class=\"espace_v\"><img src=\"image1.jpg\" alt =\"\" \/><\/div><div class=\"espace_v\"><img src=\"image2.jpg\" alt =\"\" \/><\/div><\/code><\/p>\nC’est la solution la plus efficace et la plus s\u00fbre, mais elle rend le code inconfortable \u00e0 lire. Une solution interm\u00e9diaire consiste \u00e0 utiliser des commentaires HTML (ici en rouge). Cette solution fonctionne plut\u00f4t bien, \u00e0 condition de prendre soin de ne taper aucun espace entre le code normal et le code du commentaire, exactement comme ci-dessous :<\/p>\n
<div class=\"espace_v\"><img src=\"image1.jpg\" alt =\"\" \/><\/div><!--<\/span>
\n--><\/span><div class=\"espace_v\"><img src=\"image2.jpg\" alt =\"\" \/><\/div><\/code><\/p>\nEnfin, d’autres solutions existent, en utilisant le css. Elles sont moins fiables que les pr\u00e9c\u00e9dentes. La plus courante consiste \u00e0 placer un font-size: 0<\/code>;\u00a0 sur le parent, soit ici body :<\/code><\/p>\nbody { font-size: 0; }<\/code><\/p>\n![\"\"](\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2017\/03\/espace_v_02.png\")
<\/p>\n
Plus de d\u00e9tails sur ce ph\u00e9nom\u00e8ne en consultant le lien suivant :<\/p>\n
https:\/\/www.alsacreations.com\/astuce\/lire\/1432-display-inline-block-espaces-indesirables.html<\/p>\n","protected":false},"excerpt":{"rendered":"
Dans certaines situations de composition d’images, en mosa\u00efque notamment, lorsqu’on veut coller des \u00e9l\u00e9ments, il arrive que des d\u00e9fauts d’espace apparaissent, aussi bien en bas que sur les c\u00f4t\u00e9s. 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\u00e9sirable de quelques pixels … Continuer la lecture de HTML TIPS : Espaces ind\u00e9sirables<\/span>