L'attribut CSS qu'il faut maîtriser --lineheight

1. La définition de la hauteur de ligne

La hauteur de ligne fait référence à la distance entre les lignes, c'est-à-dire la distance entre les lignes de base. Seules deux lignes de texte en auront deux. lignes. Une ligne de base, alors pourquoi une seule ligne de texte a-t-elle toujours une hauteur de ligne ? Nous regardons vers le bas en gardant cette question à l'esprit.

2, boîte en ligneboîtemodèle

ce Il s'agit d'une seule ligne de texte et il y a une balise content zone

Figure 1

"Zone de contenu" (zone de contenu ) est la zone entourant le texte. On peut la considérer comme la taille de la zone de texte sélectionnée par la souris. Sa taille est uniquement liée à la font-size. le texte de la figure 1 est sélectionné par la souris, c'est-à-dire la zone de « lignes de texte simples » sélectionnée.

"Boîtes en ligne" (boîtes en ligne) n'afficheront pas le texte en blocs, mais dans une rangée. Le texte enveloppé par des éléments en ligne, tel que la "zone de contenu" enveloppée par la balise span, peut être appelé une "boîte en ligne", tandis que la partie non enveloppée par des éléments en ligne peut être considérée comme un "contenu anonyme". "Boîte liée". La « boîte en ligne » peut être considérée comme la zone de « zone de contenu » à l'intérieur de la balise span dans la figure 1, et la « boîte en ligne anonyme » peut être considérée comme le contenu entouré par la ligne pointillée rouge.

"Boîtes de ligne"(boîtes de ligne), chaque ligne est une "boîte de ligne", et la boîte de ligne est composée de boîtes en ligne anonymes et non anonymes. Il peut être vu comme la zone entourée par la ligne continue rouge la plus à l’extérieur de la figure 1.

"Boîte contenant"(boîte contenant), cette boîte est composée de "boîtes en ligne".

3. Le mécanisme de hauteur de la hauteur de ligne

L'influence de la hauteur de ligne est partout, même une seule ligne de texte ne fait pas exception. Les performances en hauteur du

texte sur une seule ligne ne sont affectées que par la hauteur de la ligne, mais principalement par la zone de contenu et l'espacement des lignes.

Hauteur de la ligne de texte sur une seule ligne :

hauteur de la ligne = hauteur de la zone de contenu + hauteur de l'espacement des lignes

Puis :

espacement des lignes = hauteur de la ligne - content Area height

La distance entre le haut du texte et le haut de la "zone de ligne" que nous voyons habituellement est l'espacement des demi-lignes.

4, unité de hauteur de ligne

(1), nombre

Par exemple :

line-height:2;
font-size:20px;

puis le texte à cette fois La hauteur occupée est de 20*2=40px

(2), longueur

Par exemple :

font-size:20px;
line-height:20px;
line-height:2em;
line-height:3rem;
line-height:3pt;

a une valeur fixe en px, tandis que le reste Il doit être converti en fonction de la taille par défaut du navigateur ou calculé à l'aide de l'attribut font-size du corps.

(3)

<p>
    文字文字
    <p>这是p标签</p>
</p>
p{
font-size:20px;
line-height:150%;
}
p{
font-size:50px;
}

Ensuite, la hauteur de ligne du "texte texte" est de 30 px, et la hauteur de ligne de la balise p interne est également de 30 px, sans recalculer la hauteur de ligne en fonction de éléments enfants.

signifie que lorsque la hauteur de ligne est définie en pourcentage, la hauteur de ligne de l'élément parent calculée en fonction de la taille de la police hérite de de l'élément enfant, et l'élément enfant ne sera pas recalculé en fonction sur la taille de la police. Hauteur de ligne, généralement peu utilisée.

(4), normal

définit la hauteur de ligne en fonction de la propriété line-height par défaut du navigateur.

(5), hériter

héritage de hauteur de ligne IE8+

hérite du paramètre de hauteur de ligne de l'élément parent, qui est généralement appliqué à certaines balises d'entrée et de bouton.

5, application de la hauteur de ligne

(1), éliminer la distance entre l'image et le fond du conteneur

Figure 2

Cause :

Les éléments en ligne sont alignés sur la ligne de base par défaut et les balises vides contiennent des nœuds fantômes vides, ce qui est équivalent pour aligner une image avec un texte, selon vertical-align:baseline, il y a donc un espacement en bas de l'image.

Nous pouvons comprendre le nœud fantôme vide ici comme une lettre c. Parce qu'il est aligné sur la ligne de base et que l'élément parent ne définit pas de hauteur fixe, la hauteur de l'élément parent est remplie par le contenu. être aligné avec la ligne de base de l'image, il sera donc sur le bord inférieur.

Lorsque l'élément parent est défini sur une hauteur fixe, le simple p contient une image et la lettre c. Par défaut, l'image est alignée avec la ligne de base du texte. Dans la figure 3, c est équivalent à un fantôme. nœud vide.

Image 3

Méthode d'élimination

1, rendre l'image en bloc

2, alignement vertical de l'image :bas

3，让匿名空白节点line-height:0

(2)，小图标大文字

<i class=&#39;icon&#39;></i>
<span>这是span标签内的文字</span>
span{
line-height:30px;
vertical-align:middle;
}
i{
vertical-align:middle;
}

(3)，图片水平垂直居中

图三

图四

原理：

空白p内存在空白幽灵节点(看不见摸不着但存在空白元素中，例如图四中的)。

当设置text-align的时候，内联元素文字和图片会居中显示，我们让空白幽灵节点的行高与p高度一致，这样就可以实现垂直居中，图片和幽灵空白节点默认基线对齐，这时图片将偏上显示，我们设置图片的vertical-align为middle就可以实现图片近似居中的效果了。

如果想让图片完全垂直居中，我们可以让p的font-size:0，原因是不同字体的显示效果不同，有的下沉，有的刚好中线对齐，当font-size:0的时候，文字就变成一个点了，也就不存在不同字体的差异了。

(4)，多行文本垂直居中

图五

图六

原理：

我们可以把span看做是图片，这样原理就和图片垂直居中原理大同小异了。就是需要将span的元素display设置成inline-block，并且重置line-height和text-align。

为何display不能是inline属性，个人观点，如果还是inline元素的话，由于此时父元素的line-height过高，子元素设置的行高很小就没有作用（因为line-height达不到父元素行高的高度，所以看上去好像是无效的），类似于margin中的由于浮动或者绝对定位的无效的原因，我在另外margin篇有介绍，css中margin的深入了解，如果有兴趣可以去看看，如果设置子元素line-height设置很大的话是有作用的，所以只能让span元素为inline-block元素，inline-block具有包裹性,所以呈现出图六效果。

如果容器是自适应高度的，无法获得高度，那么我们可以让外部容器为表格元素居中。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

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!