为什么更改font-size和line-height会搞砸我的HTML布局？

Question

我可以发布代码，如果它有用（但它很多）。基本上，如果我将line-height或font-size更改为一个非常大的值，它会破坏我的html布局 - 具体来说，我的DIV似乎变大了......但是我没有这些div中的文本。

Answer 1

任何内联元素都会关注line-height：

  

在内容由内联级元素组成的块容器元素上，'line-height'指定元素中行框的最小高度。

在您的情况下，<img>元素（块容器）中有<div>个元素（默认为内联元素）。

更改font-size会隐式更改line-height的像素值，默认值为line-height: normal，这意味着：

  

告诉用户代理根据元素的字体将使用的值设置为“合理”值。

因此，更改font-size或line-height将更改内联元素占用的垂直空间。