La propriété CSS box-sizing
nous permet d'inclure le remplissage et la bordure dans la largeur et la hauteur totales d'un élément.
Par défaut, la largeur et la hauteur d'un élément sont calculées comme ceci :
width + padding + border=largeur réelle d'un élément
hauteur + rembourrage + bordure=hauteur réelle d'un élément
Cela signifie : Lorsque vous définissez la largeur/hauteur d'un élément, l'élément apparaît souvent plus grand que ce que vous avez défini (car la bordure et le remplissage de l'élément sont ajoutés à la largeur/hauteur spécifiée de l'élément).
L'illustration suivante montre deux éléments <div> avec le même largeur et hauteur spécifiées :
Les deux éléments <div> ci-dessus se retrouvent avec des tailles différentes dans le résultat (car div2 a un remplissage spécifié):
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Without box-sizing</h1>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
</body>
</html>
La propriété box-sizing
résout ce problème.
La propriété box-sizing
nous permet d'inclure le remplissage et la bordure dans la largeur et la hauteur totales d'un élément.
Si vous définissez box-sizing: border-box;
sur un élément, le remplissage et la bordure sont inclus dans la largeur et la hauteur :
Voici le même exemple que ci-dessus, avec box-sizing: border-box;
ajouté aux deux éléments <div> :
.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;
}
Essayez-le vous-même →
<!DOCTYPE html>
<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>
<h1>With box-sizing</h1>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
</body>
</html>
Étant donné que le résultat de l'utilisation de box-sizing: border-box;
est bien meilleur, de nombreux développeurs souhaitent que tous les éléments de leurs pages fonctionnent de cette façon.
Le code ci-dessous garantit que tous les éléments sont dimensionnés de cette manière plus intuitive. De nombreux navigateurs utilisent déjà box-sizing: border-box;
pour de nombreux éléments de formulaire (mais pas tous - c'est pourquoi les entrées et les zones de texte sont différentes selon width: 100%; ).
Appliquer cela à tous les éléments est sûr et judicieux :
* {
box-sizing: border-box;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>
</body>
</html>
Définit comment la largeur et la hauteur d'un élément sont calculées : doit ils incluent ou non un remplissage et des bordures