为什么高度会随着字体大小的增加而增加？ [英] Why would the height increase with a smaller font size?

问题描述

我有一个具有特定行高的块，其中用 :: before 伪元素插入内容。

  .block :: before {
 content：'text here'; 
} 
  

但是，如果我还给内容一个更小的字体大小

  .block :: before {
 font-size： .6em; 
 content：'text here'; 
} 
  

该块实际上变得更高。为什么？

JsFiddle 。顶行没有字体大小更改，底行。

现在我发现一个可能的解决方案是设置行-height 的伪元素 0 。或者 1em 。或者甚至到正常。那么发生了什么？通过将字体大小设置为 .6em ， line-height 是否设置为一些奇怪的值？为什么？

PS虽然这看起来像一个重复（请参见右侧的列表），但我所阅读的答案都没有解释为什么设置 line-height：normal 解决了问题。必须有一些事情发生，将line-height设置为更大的值隐式。

解决方案

.lorem，.ipsum，.dolor和.sit框每个都是它们包含的单行框的高度。

每个线框的高度是基线高度的最大值+最大高度低于线的支柱的基线和线中的文本。因为strut和文本在基线上对齐。

为了清楚起见，下面em中的高度是指整个容器的字体大小（即body元素）

在.ipsum中（字体大小为1em），基线上方的高度为1em（上半部分）+ 13 / 16em ）对于支柱和文本，并且基线以下的高度是1em（半前导）+ 3 / 16em（下降，约）+ 1em（下半部分），总共为3em。 p>

在.sit中（字体大小为0.6em），基线以上的高度是[1em（上半部分）+ 13 / 16em ，约）对于文本的strut]和[1.2em（上半部前导）+ 0.6×13 / 16em（上升，约）]，并且基线以下的高度是[1em半顶）+ 3 / 16em（下降，大约）for the strut]和[1.2em（下半部分）+ 0.6×3 / 16em

评估并转换为十进制数时，基线高1.8125em，基线低1.3125em，总共3.125em，大于.ipsum的3em。

I have a block with a certain line-height, where I insert content with the ::before pseudo element.

.block::before {
  content:'text here';
}

This works well. However, if I also give the content a smaller font size

.block::before {
  font-size:.6em;
  content:'text here';
}

the block actually becomes higher. Why is that?

JsFiddle. The top row doesn't have font size changes, the bottom row does.

Now I found out that a possible solution is to set the line-height of the pseudo element to 0. Or to 1em. Or even to normal. So what is going on? Is the line-height set to some weird value by setting the font size to .6em? Why?

PS Although this looks like a duplicate (see the list to the right), none of the answers I've read so far explains why setting line-height:normal solves the issue. There must be something happening that sets the line-height to a greater value implicitly. And that's what I'm trying to find out.

解决方案

The height of the .lorem, .ipsum, .dolor, and .sit boxes is each the height of the single line box that they contain.

The height of each line box is the maximum of the height above the baseline + the maximum height below the baseline of the strut of the line and the text in the line. since the strut and the text are aligned on the baseline.

For clarity, heights below in em, refer to the font size of the overall container (i.e. the body element)

In .ipsum, (where the font size is 1em) the height above the baseline is 1em (the upper half-leading) + 13/16em (the ascender, approx) for both the strut and the text, and the height below the baseline is 1em (the half-leading) + 3/16em (the descender, approx) + 1em (the lower half-leading) making a total of 3em.

In .sit (where the font size is 0.6em) the height above the baseline is the maximum of [1em (the upper half-leading) + 13/16em (the ascender, approx) for the strut] and [1.2em (the upper half-leading) + 0.6 x 13/16em (the ascender, approx) for the text], and the height below the baseline is the maximum of [1em (the lower half-leading) + 3/16em (the descender, approx) for the strut] and [1.2em (the lower half-leading) + 0.6 x 3/16em (the descender, approx) for the text].

Evaluating that and converting to decimal gives 1.8125em above the baseline and 1.3125em below the baseline making a total of 3.125em, which is larger that the 3em of .ipsum.

这篇关于为什么高度会随着字体大小的增加而增加？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！