Pourquoi les éléments de blocs en ligne créent-ils des barres de défilement verticales même avec des hauteurs correspondantes ?

Pourquoi une barre de défilement verticale apparaît-elle lorsque le parent et l'enfant ont la même taille ?

Problème :

Lors de l'utilisation éléments de bloc en ligne (.sideBar et .contentHolder) dans un conteneur parent (.displayContainer), une barre de défilement verticale inutile apparaît malgré le parent et éléments enfants ayant la même hauteur calculée.

Cause :

La propriété d'alignement vertical par défaut pour les éléments de bloc en ligne est "baseline", qui réserve de l'espace pour les descendants ( lettres minuscules qui s'étendent en dessous de la ligne de base). Cet espace supplémentaire provoque le débordement du conteneur, déclenchant l'apparition de la barre de défilement.

Solution :

Pour éliminer la barre de défilement verticale, ajustez la propriété vertical-align sur les éléments enfants ou effectuez l'une des modifications suivantes :

• Définissez l'alignement vertical sur un autre valeur :

  • alignement vertical : haut
  • alignement vertical : bas
  • alignement vertical : milieu

• Passer à l'affichage : bloquer :

  • .sideBar { display : bloquer ; >
  • .contentHolder { display: block; >

• Définir la hauteur de ligne : 0 sur le parent :

  • .displayContainer { line-height : 0 ; >

• Définissez la taille de police : 0 sur le parent et restaurez-la sur les enfants (si nécessaire) :

  • .displayContainer { taille de police : 0 ; >
  • .sideBar { taille de police : 16 px ; >
  • .contentHolder { taille de police : 16 px ; >

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!