Dimensionnement des boîtes - Astuces CSS

Anonim

La box-sizingpropriété en CSS contrôle la façon dont le modèle de boîte est géré pour l'élément auquel il s'applique.

.module ( box-sizing: border-box; )

L'une des façons les plus courantes de l'utiliser est de l'appliquer à tous les éléments de la page, pseudo éléments inclus:

*, *::before, *::after ( box-sizing: border-box; )

C'est ce qu'on appelle souvent le «dimensionnement universel des boîtes», et c'est une bonne façon de travailler! Le (littéral) que widthvous définissez est la largeur que vous obtenez, sans avoir à effectuer de calculs mentaux et à gérer la complexité qui provient des largeurs provenant de plusieurs propriétés. Nous avons même une journée de sensibilisation à la taille des boîtes ici.

Valeurs

  • content-box: le défaut. Les valeurs de largeur et de hauteur s'appliquent uniquement au contenu de l'élément. Le rembourrage et la bordure sont ajoutés à l'extérieur de la boîte.
  • padding-box: Les valeurs de largeur et de hauteur s'appliquent au contenu de l'élément et à son remplissage. La bordure est ajoutée à l'extérieur de la boîte. Actuellement, seul Firefox prend en charge la padding-boxvaleur.
  • border-box: Les valeurs de largeur et de hauteur s'appliquent au contenu, au remplissage et à la bordure.
  • inherit: hérite de la taille de la boîte de l'élément parent.

Exemple

Cet exemple d'image compare la valeur par défaut content-box(haut) à border-box(bas):

La ligne rouge entre les images représente la valeur de largeur des éléments. Notez que l'élément avec la valeur par défaut box-sizing: content-box;dépasse la largeur déclarée lorsque le remplissage et la bordure sont ajoutés à l'extérieur de la zone de contenu, tandis que l'élément avec box-sizing: border-box;appliqué s'insère complètement dans la largeur déclarée.

Utilisation du dimensionnement de la boîte

Disons que vous définissez un élément sur width: 100px; padding: 20px; border: 5px solid black;. Par défaut, la zone résultante mesure 150 px de large. En effet, le modèle de dimensionnement de la boîte par défaut est content-box, qui applique la largeur déclarée d'un élément à son contenu uniquement, en plaçant le remplissage et la bordure en dehors de la boîte de l'élément. Cela augmente efficacement l'espace occupé par l'élément.

Si vous changez le box-sizingen padding-box, le remplissage est poussé à l'intérieur de la boîte de l'élément. Ensuite, la boîte aurait une largeur de 110px, avec 20px de rembourrage à l'intérieur et 10px de bordure à l'extérieur. Si vous souhaitez mettre le rembourrage et la bordure à l'intérieur de la boîte, vous pouvez utiliser border-box. La boîte aurait alors 100px de large - les 10px de bordure et 20px de remplissage sont tous deux poussés à l'intérieur de la boîte de l'élément.

Démo

Voir la comparaison de Pen des valeurs de taille de boîte par CSS-Tricks (@ css-tricks) sur CodePen.

En rapport

  • width
  • height
  • padding
  • border

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
Tout *† 3 * † 1 ‡ 7 * 8 * 2,1 * † Tout *

* padding-boxnon pris en charge

† les anciennes versions nécessitent un -webkitpréfixe (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozPréfixe requis jusqu'à la version 28, sans préfixe à partir de 29.