Pourquoi deux éléments de bloc en ligne de 50 % de largeur ne s'adaptent-ils pas côte à côte ?

Deux éléments de bloc en ligne avec une largeur de 50 % ne parviennent pas à s'adapter côte à côte : pourquoi ?

Lors de l'utilisation d'un bloc en ligne éléments, il existe un problème inhérent avec les espaces entre eux (environ 4 pixels de large). Cela signifie que deux divs avec 50 % de largeur chacun, plus cet espace, dépassent 100 % de largeur, ce qui les fait sortir de leur ligne unique prévue.

Exemple :

body {
  margin: 0;
}

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

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

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

Raisons de l'espace blanc Problème :

• Réduction des marges : Les marges des éléments en ligne ne fusionnent pas et ne s'effondrent pas ; au lieu de cela, ils créent de petits espaces entre les éléments.
• Espacement entre les éléments en ligne : Les navigateurs ajoutent généralement un espace de 4 px entre les éléments en ligne si aucun remplissage ou bordure n'est défini.

Solutions alternatives :

En réglant un div à 49 % la largeur peut résoudre le problème de l'écart, ce n'est pas une pratique idéale. Les alternatives incluent :

• Float : Les éléments flottants suppriment le problème d'espacement en ligne, mais affectent l'alignement vertical.
• Flexbox : L'utilisation de flexbox permet pour un contrôle de mise en page plus précis et évite les problèmes d'espaces.
• CSS Grille : La disposition moderne de la grille CSS fournit une approche basée sur une grille pour contrôler le positionnement des éléments, éliminant ainsi le besoin d'éléments de bloc en ligne et leurs problèmes d'espacement.

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!