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

Entrée CSS avec largeur : 100 % dépasse la limite du parent

Le modèle de boîte CSS et la folie des pourcentages d'incohérences

Dans le domaine du CSS, le div et ses deux enfants d'entrée semblent se libérer des limites qui leur sont assignées. De quelle sorcellerie s'agit-il ?

Dévoilons ce mystère !

La cause : la nature déviante de Padding

Selon les principes du modèle de boîte CSS, la largeur et la hauteur d'un élément jouent bien à l'intérieur la zone de contenu. Padding, cependant, aime sortir de cette boîte, agrandissant efficacement l'élément global.

L'application de width: 100 % à un élément avec padding lui accorde une marge de manœuvre excessive, le rendant plus large que son parent à 100 %. Dans ce cas, les entrées deviennent plus larges que leur conteneur.

Box-sizing à la rescousse

Pour apprivoiser le comportement malveillant du padding, nous introduisons la propriété box-sizing. Le définir sur border-box garantit que le remplissage reste confiné dans les dimensions définies de l'élément.

Technique d'héritage avancée

Les assistants de conception Web Paul Irish et Chris Coyier défendent l'hérité approche, propagée par ce qui suit extrait :

html {
  box-sizing: border-box;
}

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

Démonstration

Pour assister au correctif en action, voici le code modifié :

input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  background-color: rgb(215, 215, 215);
  line-height: 20px;
  font-size: 12px;
  color: rgb(136, 136, 136);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  box-sizing: border-box;
}

Et voilà ! Désormais, aucun champ de saisie n’ose dépasser ses limites. La santé mentale du modèle de boîte est restaurée.

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!