Maison >interface Web >tutoriel CSS >Explication détaillée de la hauteur de ligne en CSS (exemple de code)

Explication détaillée de la hauteur de ligne en CSS (exemple de code)

云罗郡主original: 2018-11-30 14:29:232798parcourir

La façon dont la hauteur d'un élément est déterminée nous est d'une grande aide pour résoudre les problèmes d'affichage des pages et pour mettre en page la page. La performance de l'opération conventionnelle consiste à définir l'attribut de hauteur pour un élément au niveau du bloc, alors il a une hauteur :

<style>
  .test {
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div class="test"></div>
</body>

Mais selon la connaissance commune, quand on ne définit pas la hauteur de l'élément et là est contenu dans l'élément, l'élément La hauteur est toujours obtenue :

<style>
  .test {
    border: 1px solid #ccc;
    width: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

Explication détaillée de la hauteur de ligne en CSS (exemple de code)

Pourquoi le div a obtenu la hauteur Ce n'est pas parce que le texte supporte la hauteur, mais parce que line-height prend en charge le div Compare. L'effet du code aux deux extrémités

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

est le suivant :

Explication détaillée de la hauteur de ligne en CSS (exemple de code)

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 0;
  }
</style>
<body>
  <div class="test">1</div>
</body>

Le résultat évident est qu'il y a une hauteur à cause de la hauteur, mais il n'y a pas de hauteur. En raison de la hauteur de la ligne, il y a plus de détails sur la hauteur. En fait, chaque ligne de texte a naturellement une zone de ligne. prend en charge la hauteur de l'élément parent.

En même temps, en regardant l'exemple ci-dessus, vous pouvez constater que la ligne centrale du texte et la ligne centrale de la hauteur de ligne sont à la même position, il existe donc une méthode de centrage couramment utilisée :

<style>
  .test {
    line-height: 100px;
    height: 100px;
  }
</style>

Définir la hauteur de ligne et la hauteur sur la même valeur peut centrer le texte verticalement

À en juger par les résultats, c'est effectivement le cas, mais cette phrase est fausse. contient quelques mots supplémentaires. Il n'est pas du tout nécessaire de définir la hauteur, seule la hauteur de la ligne est nécessaire pour centrer le texte verticalement.

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!

css

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à la méthode de création de plusieurs cellules de grille (cellules combinées) dans une disposition en grilleArticle suivant：Introduction à la méthode de création de plusieurs cellules de grille (cellules combinées) dans une disposition en grille

Articles Liés

Voir plus