Pourquoi une entrée CSS avec « largeur : 100 % » s'étend-elle au-delà de son conteneur parent ?

Entrée CSS avec largeur : 100 % sort de la limite du parent

Vous avez peut-être rencontré une situation dans laquelle un champ de saisie avec largeur : 100 % s'étend au-delà de son conteneur parent dans CSS. Cela se produit en raison de la façon dont le modèle de boîte CSS gère le remplissage.

Par défaut, le remplissage et la marge sont ajoutés au-dessus de la largeur et de la hauteur d'un élément. Normalement, ce n'est pas un problème. Cependant, lorsqu'un élément a un remplissage ajouté et une largeur : 100 %, le remplissage pousse le contenu en dehors des limites du parent.

Pour éviter cela, nous devons modifier la façon dont le modèle de boîte gère le remplissage. La propriété CSS box-sizing nous permet de le faire. En définissant box-sizing: border-box, le remplissage sera inclus dans la largeur et la hauteur de l'élément, résolvant ainsi efficacement le problème.

input[type=text],
input[type=password] {
  box-sizing: border-box;
  width: 100%;
  ...
}

Cette modification garantit que les champs de saisie ne dépasseront pas les limites de leurs parents, même avec un rembourrage appliqué. N'oubliez pas de vérifier la compatibilité du navigateur pour le dimensionnement des boîtes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!