Pourquoi mon conteneur déborde-t-il d'éléments de bloc en ligne malgré le dimensionnement de la « border-box » ?

Comprendre le débordement de conteneur avec les éléments de bloc en ligne

Dans l'extrait de code HTML et CSS fourni, le problème provient de l'utilisation de blocs en ligne. bloquer des éléments dans un conteneur. Par défaut, les éléments de bloc en ligne sont rendus avec des espaces supplémentaires dans certains navigateurs.

Source des espaces

Cet espace provient des caractéristiques en ligne des éléments de bloc en ligne. Tout comme les espaces et les sauts de ligne dans les éléments de texte créent des espaces visibles, il en va de même dans les éléments de bloc en ligne. Par conséquent, même si le dimensionnement de la bordure est appliqué, le débordement du conteneur se produit en raison de la largeur inattendue introduite par cet espace.

Solution : supprimer les espaces

Pour Pour résoudre ce problème de débordement, il est nécessaire de supprimer tous les espaces entre les éléments de bloc en ligne dans le code source. Ce faisant, le navigateur affichera les éléments sans aucun espacement supplémentaire, garantissant ainsi qu'ils s'intègrent parfaitement dans le conteneur.

Extrait de code révisé :

.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>

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!