Comment ajuster la taille d’une div à son contenu en CSS

Vous pouvez simplement utiliser la propriété CSS display avec la valeur inline-block pour créer un <div> pas plus grand que son contenu (c’est-à-dire ajuster la taille à son contenu). Essayons l’exemple suivant pour voir comment cela fonctionne:
 
 

Code HTML :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajuster la taille d'une div à son contenu</title>
		<style>
			/* Mettez le code css ici. */
		</style>
	</head>
	<body>
		<div class="container">
			<img src="https://1.bp.blogspot.com/-RAj_WmWtT5A/XSY-zUdWKbI/AAAAAAAAFFM/MzWiRE8G3m8k6aYHr9nsxfOzjiK5ZPzmwCLcBGAs/s1600/test.jpg">
		</div>
	</body>
</html>

 
 

Code CSS :
img {
    border: 20px solid white;
}

.container {
    display: inline-block;
    border: 20px solid #000;
}
Résultat

 

Une réflexion sur “Comment ajuster la taille d’une div à son contenu en CSS

  • février 1, 2021 à 6:17
    Permalien

    …… tu es à présent mon dieu mdr :DD
    je galérais comme pas possible avant de trouver ton truc…. MERCI !!!

    Répondre

Laisser un commentaire

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