La propriété CSS box-sizing

La propriété box-sizing va nous permettre de définir quelles boites doivent être inclues dans le calcul de la largeur et de la hauteur d’un élément.

Cette propriété va être très utile pour éviter qu’un élément ne dépasse de son parent à cause de bordures trop large ou de marges internes trop grandes par exemple.

 

Les interactions entre les différentes propriétés du modèle des boites

Commençons déjà par souligner comment fonctionnent les propriétés liées au modèle des boites ensemble.

Vous pouvez retenir que lorsqu’aucune largeur n’est explicitement définie pour un bloc, alors l’ajout de marges (externes comme internes) et de bordures va compresser le contenu ou les boites internes afin que l’élément ne dépasse pas de son parent conteneur.

En revanche, dès qu’on définit une largeur pour l’élément auquel on applique des marges et / ou des bordures, les différentes tailles des marges et bordures vont venir s’ajouter par défaut à la taille définie et l’élément va ainsi pouvoir potentiellement dépasser de son conteneur.

 

Le fonctionnement de la propriété box-sizing

La propriété box-sizing va nous permettre d’indiquer que l’on souhaite inclure les marges internes et les bordures dans le calcul de la taille d’un élément.

Nous allons pouvoir fournir l’un des mots clefs suivants à cette propriété :

• content-box : valeur par défaut. Les dimensions définies pour l’élément vont s’appliquer à sa boite de contenu. Toute marge interne ou bordure ajoutées ensuite vont augmenter la taille de l’élément ;
• border-box : les dimensions définies pour l’élément vont s’appliquer à la boite contenant le contenu + le padding + les bordures. En ajoutant ou en augmentant la taille des marges internes ou des bordures, la taille de l’élément ne change pas mais son contenu sera compressé.

 

Exemple d’utilisation de la propriété box-sizing

Dans l’exemple ci-dessous, nos paragraphes sont tous des enfants d’un div class="conteneur". La largeur des éléments p est fixée à 100% de la taille de leur élément parent.

Par défaut, la largeur de la boite de contenu des paragraphes sera égale à celle du div parent. Ensuite, nous ajoutons des marges internes et des bordures à nos paragraphes. La taille des marges et de la bordure va par défaut s’ajouter à la taille définie avec width pour nos paragraphes et ceux-ci vont donc dépasser de leur parent.

Nous allons donc utiliser la propriété box-sizing et sa valeur border-box pour que la largeur définie inclue les marges internes et bordures dans son calcul et afin que notre paragraphe ne dépasse pas de son élément parent.

See the Pen Cours HTML CSS 5.6.1 by Pierre (@pierregiraud) on CodePen.