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>