Comment supprimer l’espace blanc sous une image avec CSS

Si vous essayez de placer une image dans un bloc <div>, vous verrez un espace blanc supplémentaire (environ 4 pixels) au bas de l’image. Cela se produit parce que l’image est un élément « inline », donc le navigateur ajoute des espaces sous la ligne pour ajuster les autres éléments « inline ».
 
 
Le moyen le plus simple de se débarrasser de ce problème consiste à modifier la propriété display de l’image en utilisant la valeur « block » au lieu de « inline », comme illustré dans l’exemple ci-dessous:
 

Code HTML:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Supprimer l'espace blanc sous une image avec CSS</title>
		<style>
			/* Mettez le code CSS ici. */
		</style>
	</head>
	<body>
		<h3>Comportement par défaut</h3>
		<div class="box1">
			<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
		</div>
		<br>
		<h3>Après la modification de la propriété display</h3>
		<div class="box2">
			<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
		</div>
	</body>
</html>

 
 

Code CSS:
.box1,
.box2 {
    width: 200px;
    border: 4px solid black;
}

.box2 img {
    display: block;
}
Résultat
Comportement par défaut

Après la modification de la propriété display

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *