Pourquoi mes éléments de bloc en ligne ne s'alignent-ils pas côte à côte ?

Les éléments de bloc en ligne ne parviennent pas à s'aligner côte à côte

Considérons un scénario dans lequel deux éléments avec display: inline-block se voient attribuer une largeur de 50 %. On pourrait s’attendre à ce qu’ils s’adaptent côte à côte, mais au contraire, ils dépassent l’espace disponible. Pour résoudre ce problème :

Origine du problème

Les éléments de bloc en ligne héritent d'une marge entre eux, bien qu'ils semblent l'éliminer visuellement. Cet espace supplémentaire, généralement d'environ 4 px, fait que la largeur totale des deux éléments dépasse 100 %.

Solutions alternatives

• Réduire la largeur des éléments : Diminuer la la largeur d'un élément à 49 % résout le problème de débordement mais introduit un problème indésirable écart.
• Éléments flottants :Flotter les deux éléments les aligne correctement, en conservant la largeur de 50 % pour chacun.

Solution idéale pour les navigateurs modernes (2021 et au-delà )

Flexbox ou Grille CSS Layout sont des alternatives recommandées au bloc en ligne. Ils offrent un meilleur contrôle sur l'espacement et la disposition sans le problème inhérent des espaces.

Inline-Block et Whitespace

Pour illustrer le problème des espaces, considérons le code suivant :

body {
  margin: 0; /* remove default body margin */
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Bien que les éléments semblent adjacents, il existe en pratique une marge étroite entre eux.

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!