CSS : Box Sizing

boxsizinf

Avant d’entamer le sujet concernant le propriété box-sizing, il faut d’abord comprendre certaines choses. En effet, il faut savoir comment les navigateurs calculent les dimensions des éléments web. En dehors de la boîte, les bordures et les marges intérieures sont ajoutées par défaut.

Un exemple pour illustrer cela : une boite avec une largeur de 100px et un padding de 30px aura une largeur finale de 160px (100 + 30 + 30). Ainsi, on pourra dire que ce comportement n’est pas obligatoirement gênant lorsque le travail est effectué avec des largeurs fixes. Pour l’obtention d’un élément d’une largeur de 100px et un padding de 20px, il ne suffira que d’effectuer une soustraction.

Toutefois, à l’heure actuelle où il est désormais question de responsive design, de pourcentage et de design fluide, ce modèle de box devient rapidement limité. Cela est dû au fait que la création d’un champ texte prenant une largeur de 100% sera impossible étant donné que les bordures et les padding s’ajouteront et feront déborder l’élément de son élément parent.

La solution à ce problème est tout simplement l’attribut CSS box-sizing. En effet, celui-ci offre la possibilité de changer le comportement du navigateur ce qui permettra aux bordures et padding de s’ajouter non plus à l’extérieur, mais à l’intérieur.

Pour cela, il faut utiliser les commandes ci-après :

Reprenons l’exemple du début avec les commandes de l’attribut box-sizing :

Répondre