字体大小影响块元素的高度？答案

【问题标题】：font size affects the block element's height?字体大小影响块元素的高度？
【发布时间】：2019-01-21 23:57:18
【问题描述】：

块元素高度受内容字体大小影响对吗？

最好只是告诉你我的意思，看看这个例子fiddle

如果增加div内.p类的字体大小，div的高度也会增加，这是为什么呢？

【问题讨论】：

标签： html css

【解决方案1】：

这是因为 div 的字体大小决定了文本的基线在哪里，而 span 是放在该基线上的。

增加 div 的字体大小会使基线上下的距离更高。是 span 内部的内容给出了元素的大小，所以只有基线以上的距离会影响大小，而不是基线以下的距离，所以你会看到文本被下推，但没有对应的文本下方的空格。

【讨论】：

哦。谢谢。如果有关于这个的一些文件。例如在 w3 文件中
字体大小如何决定基线？
@SKing7：字体大小设置文本高度，但行高限制它。将一些字符放在 span 之外，看看字体大小和行高如何影响它们：jsfiddle.net/Guffa/DtcFn/7
行高限制了增加，为什么高度还是增加了一点？
@SKing7：外层元素的行高限制了它的文字高度，但是内层元素的行高不同，所以它的文字高度可以更高，影响外层元素的大小。

【解决方案2】：

这是因为您没有在样式表中定义height-属性。默认为height: auto。

【讨论】：

为 div 指定高度不会阻止文本上方的空间，它只会在该高度处剪切文本。
@Guffa：上面的空间有什么用？问题是为什么高度会发生变化，原因是高度没有定义......这个高度被占用肯定是一个完全不同的问题？
@Guffa：啊，我明白你的意思了，如果你将p 类的字体大小增加到 33px 以上，那么 div 会变大，但字体不会改变。我曾尝试更改该值，但不够高，因此我发现唯一会产生影响的字体大小是更改文本的字体大小。
这个越来越大的差距是因为font-size: 33px以上的line-height不能再是19px了。所以行高在增加，盒子的高度也随之增加。
行高改变了吗？为什么？？

【解决方案3】：

因为你没有在 div 上设置高度。

这意味着 div 将扩展以适应其内容，在本例中为 p 元素。

如果不指定高度，则默认为height:auto。

【讨论】：

【解决方案4】：

你需要设置div高度，见http://jsfiddle.net/VpeW8/

【讨论】：

【解决方案5】：

因为行高是根据字体大小估算的。为了阻止 div 响应字体大小而扩展，在 CSS 中显式设置 line-height 属性。

【讨论】：