Comment éliminer les espaces blancs supplémentaires autour du grand texte en bloc en ligne ?

Résolution du remplissage des espaces blancs dans le texte volumineux des blocs en ligne

Les éléments des blocs en ligne rencontrent souvent un problème de remplissage des espaces blancs supplémentaires au-dessus et en dessous texte, surtout lorsque la taille de la police est particulièrement grande. Ce « remplissage » apparaît à l'intérieur du bord du contenu, laissant une marge visible autour du texte.

Pour éliminer ce remplissage indésirable, une solution consiste à ajuster la hauteur de ligne, comme démontré dans l'extrait de code suivant :

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  line-height: 34px;
}

Bien que cette approche s'avère efficace dans Chrome, Firefox présente un problème où le texte se déplace vers le haut. Pour résoudre cette incohérence entre navigateurs, il est nécessaire de définir explicitement la police, comme le montre l'extrait de code mis à jour :

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
  font-family: 'Times New Roman';  // Explicitly set the font
  line-height: 34px;
  height: 35px;
}

En spécifiant une police spécifique et en ajustant à la fois la hauteur de ligne et la hauteur. , ce code garantit un espacement cohérent et précis autour des éléments de texte en bloc, quelle que soit la taille de la police ou la variation du navigateur.

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!