Pourquoi mes éléments de bloc en ligne débordent-ils de leur conteneur et comment puis-je y remédier ?

Conteneur débordant de boîtes de blocs en ligne

Dans le code fourni, des boîtes de blocs en ligne sont utilisées, qui devraient s'adapter parfaitement au sein du récipient. Cependant, les cases débordent en raison d'un espacement inattendu.

Ce comportement découle de l'espacement inhérent aux éléments en ligne et de l'emprunt de cette caractéristique par les éléments de bloc en ligne. Les espaces ou les sauts de ligne entre les éléments de bloc en ligne, comme les espaces entre les éléments span ou les éléments de texte dans un paragraphe, sont reconnus par le navigateur et affichés comme une largeur supplémentaire.

Solution

Pour éliminer ce problème, supprimez tout espace entre les éléments dans le code 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>

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!