Pourquoi les éléments Inline-Block débordent-ils de leur conteneur malgré « box-sizing : border-box » ?

Conteneur de surajustement des boîtes de blocs en ligne

En CSS, les éléments de blocs en ligne sont intrinsèquement rendus avec un espacement supplémentaire. Cela peut entraîner des débordements inattendus ou un emballage dans des conteneurs.

Considérons l'exemple suivant :

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}

.box {
  display: inline-block; 
  box-sizing:border-box;
  width:25%;
  border:2px solid blue;
  height:100%;
}

<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Malgré la définition de box-sizing : border-box, les éléments de bloc en ligne à l'intérieur le récipient ne rentre pas parfaitement. En effet, l'espacement par défaut entre les éléments en ligne, y compris les sauts de ligne, entraîne un espace horizontal supplémentaire.

Pour résoudre ce problème, on peut éliminer les espaces entre les éléments dans la source HTML :

<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

Cela garantit qu'il n'y a pas d'espace supplémentaire entre les éléments du bloc en ligne, leur permettant de s'adapter correctement dans leur conteneur.

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!