Pourquoi le remplissage CSS augmente-t-il la taille de l'élément?

Question

J'essaie de donner un peu de rembourrage à mes div et textarea. Lorsque je fais cela, cela augmente la taille de l'élément, au lieu de réduire la zone de contenu à l'intérieur de celui-ci. Y a-t-il un moyen de réaliser ce que j'essaie de faire?

Merci de votre aide!

Answer 1

Vous pouvez également ajouter box-sizing:border-box à l'élément conteneur afin de pouvoir spécifier une largeur et une hauteur qui ne varient pas lorsque vous ajoutez un remplissage et / ou une bordure à l'élément.

Voir ici (MDN) pour les spécifications.

Answer 2

Selon les spécifications CSS2, le rendu de la largeur d'une boîte de type de l'élément est égale à la somme de sa largeur, à gauche/droite de la bordure gauche/droite et de rembourrage (à gauche/à droite de la marge entre en jeu). Si votre boîte est d'une largeur de '100%' et aussi a de la marge, de la frontière et de rembourrage, ils affecteront (augmentation) de la largeur occupée par l'objet.

Donc, si votre textarea doit être de 100% de largeur, affecter des valeurs à la largeur de la marge gauche/droite, frontière-gauche/droite et padding-left/droite de manière à ce que leur somme est égale à 100%.

---

En CSS3, nous avons trois box-sizing modèles. Vous pouvez utiliser border-box modèle:

La largeur et la hauteur spécifiées (et min/max propriétés) sur cet élément de déterminer la zone de bordure de l'élément. C'est, tout remplissage ou la frontière indiquée sur l'élément est disposé et à l'intérieur de cette largeur et la hauteur spécifiées. Le contenu de la largeur et de la hauteur sont calculés en soustrayant la frontière et le remplissage de la largeur de la côtés respectifs de la spécifié ‘width' et ‘height' propriétés.

Answer 3

C'était un désastre pour le W3C et divers navigateurs ne faisaient qu'ajouter à cette complexité avec leurs propres versions de modèles de boîtes. Personnellement, au lieu de penser à quel navigateur ou à chaque paramètre CSS ferait l'affaire, je viens juste d'envelopper le contenu de la boîte dans une autre instruction DIV et d'utiliser les marges sur cette DIV, au lieu d'utiliser un remplissage, comme ceci:

 <div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>
 

Bien que cela ne fonctionne que pour les conteneurs de taille fixe

Answer 4

Cela dépend du navigateur et de son implémentation du modèle de boîte . Ce que vous vivez, c'est le comportement correct.

IE se trompait traditionnellement: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 5

Pour une solution plus multi-navigateurs, vous pouvez éviter ce problème en encapsulant toute balise nécessitant un remplissage dans une autre balise de largeur fixe et en lui attribuant la largeur: auto. Ainsi, si le parent a une largeur de x et que vous ajoutez un remplissage à l'enfant, celui-ci héritera de la largeur totale de x, en appliquant le remplissage correctement sans modifier la largeur du parent ni la sienne.