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

 

Partagez cet article

Laisser un commentaire

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