CSS3 - Dimensionnement de la boîte
La propriété de dimensionnement de la boîte est utilisée pour modifier la hauteur et la largeur de l'élément.
Depuis css2, la propriété box a fonctionné comme indiqué ci-dessous -
width + padding + border = largeur réelle visible / rendue de la boîte d'un élément
height + padding + border = hauteur réelle visible / rendue de la boîte d'un élément
Cela signifie que lorsque vous définissez la hauteur et la largeur, elle apparaît un peu plus grande que la taille donnée, car l'élément frontière et le remplissage sont ajoutés à la hauteur et à la largeur de l'élément.
Propriété de dimensionnement CSS2
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Il produira le résultat suivant -
L'image ci-dessus a la même largeur et la même hauteur que deux éléments, mais le résultat est différent, car le second est inclus dans la propriété de remplissage.
Propriété de dimensionnement de la boîte CSS3
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class = "div1">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>L'échantillon ci-dessus a la même hauteur et la même largeur avec box-sizing:border-box. ici le résultat est montré ci-dessous.
Il produira le résultat suivant -
Les éléments ci-dessus ont la même hauteur et la même largeur avec box-sizing: border-box donc le résultat est toujours le même pour les deux éléments comme indiqué ci-dessus.