Pourquoi deux éléments de bloc en ligne de 100 % de largeur se chevauchent-ils ?

Deux éléments de bloc en ligne se chevauchant lors de l'utilisation d'une largeur à 100 %

Dans le but de créer deux colonnes côte à côte de largeur égale , vous pouvez utiliser display: inline-block sur les éléments. Cependant, un problème inattendu survient lorsque ces éléments occupent cumulativement 100 % de la largeur du parent : la deuxième colonne passe à une nouvelle ligne.

Pourquoi cela se produit-il ?

La raison de ce comportement réside dans la manière dont les éléments de bloc en ligne gèrent les espaces. Par défaut, les éléments de bloc en ligne respectent les caractères d'espacement dans le code HTML. Lorsque vous avez un espace blanc important entre les éléments, comme des nouvelles lignes ou des tabulations, les éléments seront séparés en conséquence.

Solution : Supprimez l'espace blanc

Pour éviter la deuxième colonne de l'habillage, supprimez simplement l'espace blanc entre les éléments du bloc en ligne. Ceci peut être réalisé en utilisant une seule ligne de code HTML, comme ce qui suit :

<div>

Une fois l'espace blanc supprimé, les éléments du bloc en ligne adhéreront à leurs largeurs déclarées et resteront côte à côte. côté en première ligne, accomplissant le comportement souhaité.

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!