Objectif

• Connaitre Le dimensionnement des éléments en CSS
• Etre capable d’utiliser la propriété CSS box-sizing: border-box

Présentation

• Les éléments de type bloc ou certains éléments de type en ligne (ceux ayant des dimensions par défaut – hauteur et largeur – comme , par exemple) ont des propriétés de dimensionnement communes ; on parle alors du “modèle de boîte“.Ces propriétés sont :
• width et height, portant sur la largeur et la hauteur
• padding, portant sur la marge interne
• margin, portant sur la marge externe
• border, portant sur les bordures
• Le schéma suivant montre l’utilisation des différents propriétés

Utilisation

Syntaxes

• width: | NN% | auto | inherit
• height: | NN% | auto | inherit

La propriété box-sizing

• 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.
• Par défaut, la largeur et la hauteur d’un élément sont calculées comme suit:
• width + padding + border = largeur réelle d’un élément(Largeur à l’écran)
• height + padding + border = hauteur réelle d’un élément(Hauteur de l’écran)
• L’illustration suivante montre deux éléments <div> avec les mêmes largeur et hauteur spécifiées:
Le style est : width: 300px;height: 100px;border: 1px solid blue;float: left;
Le style est:width: 300px;height:20px;border: 1px solid red;padding:100px;float: left;

Si vous définissez box-sizing: border-box;un élément, le remplissage et la bordure sont inclus dans la largeur et la hauteur: