Pourquoi mon élément parent a-t-il une barre de défilement verticale même si lui et son enfant ont des hauteurs égales ?

Adressage de la barre de défilement verticale malgré un enfant et un parent de même taille

En HTML, lorsque vous utilisez CSS pour styliser les éléments imbriqués où le parent et les enfants ont à hauteurs égales, il est possible de rencontrer une barre de défilement verticale dans l'élément parent. Cela peut prêter à confusion car il semble que la barre de défilement ne devrait pas être nécessaire.

La cause : ligne de base à alignement vertical

La racine de ce problème réside dans la valeur par défaut. Propriété CSS pour les éléments de niveau en ligne, y compris les blocs en ligne (par exemple, divs avec display : inline-block) : vertical-align : baseline. En typographie, les caractères comme « j » et « g » s'étendent en dessous de la ligne de base. Cet espacement de ligne de base crée une hauteur supplémentaire au sein de l'élément parent.

Résoudre le problème

Pour supprimer la barre de défilement verticale inattendue, vous pouvez ajuster l'alignement vertical des éléments enfants en utilisant propriété d'alignement vertical. Le définir en haut, en bas ou au milieu, au lieu de la ligne de base par défaut, éliminera l'espacement supplémentaire et empêchera la barre de défilement d'apparaître :

.sideBar, .contentHolder {
  vertical-align: top; // or 'bottom', 'middle'
}

Alternatives

En plus d'ajuster l'alignement vertical, il existe d'autres options pour résoudre ce problème :

• Utiliser display: block au lieu de display : inline-block pour les éléments enfants.
• Définissez la hauteur de ligne : 0 sur l'élément parent.
• Définissez la taille de police : 0 sur l'élément parent (vous pouvez la remplacer sur les éléments enfants si nécessaire).

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!