Pourquoi les éléments d'entrée au niveau bloc ne remplissent-ils pas toujours leurs conteneurs comme des div ?

Éléments d'entrée affichés sous forme de bloc : pourquoi ils diffèrent des divs

Il est courant de percevoir un élément d'entrée avec display: block et width : auto se comporter comme un div, occupant toute la largeur de son conteneur. Cependant, comme observé dans l'extrait de code donné, ce n'est pas le cas.

Comprendre l'écart

Contrairement aux div, les éléments d'entrée suivent un modèle de boîte différent, appelé le modèle de la bordure. Ce modèle prend en compte le remplissage et les bordures dans le calcul de la largeur globale, contrairement au modèle de zone de contenu utilisé pour les divs.

Surmonter le problème

Pour forcer un élément d'entrée à s'étendre sur toute la largeur du conteneur, tout en respectant son remplissage et ses bordures, on peut utiliser la propriété max-width: 100%. Cette technique limite essentiellement la largeur de l'élément d'entrée à son conteneur parent, même si la largeur calculée dépasse cette valeur en raison de sa bordure et de son remplissage.

Compatibilité entre navigateurs

Pour obtenir un comportement cohérent entre les navigateurs, la propriété box-sizing: border-box récemment introduite peut être utilisée. Cette propriété demande explicitement au navigateur d'utiliser le modèle border-box pour l'élément cible, quel que soit son modèle de boîte par défaut.

Implémentation

Le code suivant illustre cette solution :

<div class="wrapper">
  <input type="text" class="input" placeholder="Input Text">
</div>

<style>
  .wrapper {
    width: 500px;
    border: 1px solid black;
    padding: 20px;
  }

  .input {
    width: 100%;
    box-sizing: border-box;
  }
</style>

Cette approche garantit que l'élément d'entrée occupe toute la largeur du conteneur dans tous les principaux navigateurs.

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!