Comment supprimer l’espace blanc sous une image avec CSS

juillet 11, 2019décembre 19, 2023 Amine KOUIS Aucun commentaire

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

Résultat

Comportement par défaut

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

Optimiseur d’image en ligne

QCMs qui pourraient vous intéresser :

Code HTML:

Code CSS:

Comportement par défaut

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

Vous pourrez aussi aimer

Comment créer une liste sans puces en HTML

Comment changer l’aspect du curseur en CSS

Comment ajouter l’ombre aux éléments HTML en CSS

Laisser un commentaire Annuler la réponse