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 e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *