Dimensionnement de boîte en CSS

Objectif

• Etre capable de gérer le dimensionnement de boîte en CSS

Introduction

• La propriété box-sizing CSS nous permet d'inclure le remplissage et la bordure dans la largeur et la hauteur totales d'un élément.
• Le modèle de boîte de la spécification CSS 2.1 est construit ainsi: lorsque nous fixons la largeur ou la hauteur d'un élément HTML, comme une div par exemple, cette valeur correspond au contenu de l'élément. Cela veut dire que les bordures et les padding augmentent la taille de cette boîte. Prenons cet exemple CSS appliqué à une div :

div{
width: 200px;
border: 5px solid black;
padding: 20px;
}

largeur réelle d'un élément = width + padding + border hauteur réelle d'un élément = height + padding + border