4.1 Propriété box-sizing
La propriété box-sizing en CSS est un outil puissant pour gérer le modèle de dimensionnement des éléments.
Elle détermine comment les dimensions d'un élément sont calculées, y compris la largeur et la hauteur, ainsi que les marges internes, les bordures et les marges externes. Ci-dessous, nous examinerons en détail comment fonctionne box-sizing et comment son utilisation peut affecter la mise en page d'une page web.
Principaux modèles de box-sizing
Content-box (modèle de contenu)
La valeur content-box est la valeur par défaut pour tous les éléments. Dans ce modèle, les dimensions de l'élément
(width et height) ne définissent que la taille du contenu, excluant les marges internes et les bordures. Cela signifie que les marges internes et les bordures s'ajoutent à la largeur et à la hauteur totales de l'élément.
Border-box (modèle de bordure)
La valeur border-box modifie le modèle de calcul de sorte que les dimensions de l'élément (width et height)
incluent les marges internes et les bordures. Cela signifie que les marges internes et les bordures sont comprises dans la largeur et la hauteur totales de l'élément, simplifiant ainsi les calculs et la gestion des dimensions de l'élément.
Exemple d'utilisation de box-sizing :
.box {
background-color: #3498db;
color: white;
padding: 20px;
border: 5px solid #2c3e50;
margin: 10px;
width: 200px;
height: 100px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">Content-box: la largeur et la hauteur incluent uniquement le contenu.</div>
<div class="box border-box">Border-box: la largeur et la hauteur incluent les marges internes et les bordures.</div>
Explication du code :
.box: style de base pour toutes les boîtes, incluant les marges internes, les bordures et les dimensions.content-box: élément avec box-sizing: content-box, où largeur et hauteur incluent uniquement le contenu.border-box: élément avec box-sizing: border-box, où largeur et hauteur incluent les marges internes et les bordures
4.2 Impact de box-sizing sur la mise en page
Modèle de contenu (Content-box)
Lorsque box-sizing: content-box; est utilisé, les marges internes et les bordures s'ajoutent à la largeur et à la hauteur totales de l'élément.
Cela peut nécessiter une attention supplémentaire lors du calcul des dimensions et du positionnement des éléments.
Exemple d'utilisation
Dans ce cas, la largeur totale de l'élément sera
200px + 20px (padding) * 2 + 5px (border) * 2 = 250px,
et la hauteur totale sera 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px.
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box content-box">Content-box: la largeur et la hauteur incluent uniquement le contenu.</div>
Modèle de bordure (Border-box)
Lorsque box-sizing: border-box; est utilisé, les marges internes et les bordures sont incluses dans la largeur et la hauteur spécifiées de l'élément.
Cela simplifie les calculs et la gestion des dimensions de l'élément, notamment lors de la création de dispositions réactives.
Exemple d'utilisation :
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
<div class="box border-box">Border-box: la largeur et la hauteur incluent les marges internes et les bordures.</div>
4.3 Création d'une mise en page réactive
Utiliser box-sizing: border-box; permet de simplifier la création de mises en page réactives, car
les dimensions des éléments incluent les marges internes et les bordures, évitant ainsi des débordements inattendus.
Exemple d'utilisation :
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px;
background-color: #f4f4f4;
}
.item {
flex: 1 1 calc(33.333% - 20px);
padding: 20px;
border: 5px solid #3498db;
background-color: #fff;
}
<div class="container">
<div class="item">Élément 1</div>
<div class="item">Élément 2</div>
<div class="item">Élément 3</div>
<div class="item">Élément 4</div>
<div class="item">Élément 5</div>
<div class="item">Élément 6</div>
</div>
Explication du code :
* { box-sizing: border-box; }: application du modèle de bordure à tous les éléments de la page pour simplifier la gestion des dimensions.container: conteneur flex avec mise en page réactive.item: éléments flex avec distribution uniforme de la largeur et inclusion de padding et de bordure dans la largeur totale
4.4 Dimensions fixes avec marges internes
Utiliser box-sizing: border-box; permet de définir facilement des dimensions fixes pour les éléments
avec marges internes, sans souci de débordement.
Exemple d'utilisation :
.fixed-size {
box-sizing: border-box;
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid #2ecc71;
background-color: #ecf0f1;
text-align: center;
line-height: 150px; /* Centrage vertical du texte */
}
<div class="fixed-size">
Dimensions fixes
</div>
Explication du code :
.fixed-size: élément avec des dimensions fixes de 300x150 pixels, incluant padding et bordure, permettant un contrôle précis de ses dimensions
GO TO FULL VERSION