Dimensionnement de la boîte CSS

Comment travailler avec le dimensionnement des boîtes en CSS

Le comportement par défaut des navigateurs lors du calcul de la largeur d'un élément est d'appliquer la largeur et la hauteur calculées auzone de contenu, sans prendre en compte le remplissage, la bordure et la marge.

Cette approche s'est avérée assez compliquée à utiliser.

Vous pouvez modifier ce comportement en définissant lebox-sizingbiens.

Lebox-sizingla propriété est d'une grande aide. Il a 2 valeurs:

  • border-box
  • content-box

content-boxest la valeur par défaut, celle que nous avions depuis des lustresbox-sizingest devenu une chose.

border-boxest la nouvelle et formidable chose que nous recherchons. Si vous définissez cela sur un élément:

.my-div {
  box-sizing: border-box;
}

le calcul de la largeur et de la hauteur comprend le rembourrage et la bordure. Seule la marge est omise, ce qui est raisonnable car dans notre esprit, nous voyons généralement cela comme une chose distincte: la marge est en dehors de la boîte.

Cette propriété est un petit changement mais a un grand impact. CSS Tricks a même déclaré unjournée internationale de sensibilisation à la taille des boîtes, il suffit de dire, et il est recommandé de l'appliquer à chaque élément de la page, prêt à l'emploi, avec ceci:

*, *:before, *:after {
  box-sizing: border-box;
}

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: