box-sizing
La propriété box-sizing indique la façon dont sont calculées les hauteur et largeur totales d'un élément.
Elle peut prendre deux valeurs:
- content-box C'est la valeur par défaut. Ce sont les dimensions de la boîte de contenu qui sont prises en comptent.
- border-box Si la boîte de contenu possède une bordure, celle-ci sera prise en compte dans les dimensions de l'élément.
<style>
.conteneur {
width: 240px;
height: 240px;
border: 1px dotted black;
}
#bloc1 {
width: 240px;
height: 80px;
border: 10px solid red;
box-sizing: content-box;
}
#bloc2 {
width: 240px;
height:80px;
border: 10px solid blue;
box-sizing: border-box;
}
</style>
<div class="conteneur">
<div id="bloc1">
box-sizing: content-box;
</div>
<div id="bloc2">
box-sizing: border-box;
</div>
</div>
box-sizing: content-box;
box-sizing: border-box;