Comment adapter la taille d'un div à son contenu ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-06-12 12:57:08

Question

Comment faire pour adapter la taille d'une balise <div> à son contenu ?

Réponse

Pour adapter la taille d'une balise <div> à son contenu, vous pouvez utiliser les propriétés CSS width et height avec la valeur fit-content.

De cette manière la longueur et la hauteur de la balise s'adapte automatiquement à son contenu.

Dans l'exemple ci-dessous on crée une CLASS CSS nommée adapter, on applique la valeur fit-content au propriété de longueur et hauteur : width et height.

On définit par ailleurs une mage interne de 10 pixels via la propriété padding, et on applique un fond vert au cadre avec la propriété background-color.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment adapter la taille d'un div à son contenu ?</title>
<style>
.adapter {
  width: fit-content;
  height: fit-content;
  background-color: green;
  padding: 10px;
}
</style>
</head>  
<body>
<div class="adapter">Un div dont la taille d'adapte<br>à son contenu.</div>
</body>
</html>