Explication détaillée de la hauteur de ligne en CSS (exemple de code)-tutoriel CSS-php.cn

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

云罗郡主

Libérer： 2018-11-30 16:28:36

original

2793 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!