Dimensionnement de la boîte CSS


Table des matières

    Afficher la table des matières


Dimensionnement de la boîte CSS

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.


Sans la propriété CSS box-sizing

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 :

This div is smaller (width is 300px and height is 100px).

This div is bigger (width is also 300px and height is 100px).

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é):

Exemple

.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.



Avec la propriété CSS box-sizing

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 :

Both divs are the same size now!

Hooray!

Voici le même exemple que ci-dessus, avec box-sizing: border-box; ajouté aux deux éléments <div> :

Exemple

.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 :

Exemple

* {
  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>
  &lt;textarea name="message" rows="5" cols="30">
  &lt;/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>



Propriété de dimensionnement de la boîte CSS

box-sizing

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