Question

我正在使用以下网站的line-height属性：

http://www.w3schools.com/css/tryit.asp?filename=trycss_float6

div.container
{
    width:100%;
    margin:0px;
    border:1px solid gray;
    line-height:150%;
}

我试着了解行高，我读到了这个：

在块级元素上，行高CSS属性指定元素内线框的最小高度。

自：

https://developer.mozilla.org/en-US/docs/CSS/line-height#Examples

但有趣的是，在上面w3schools的例子中，更改line-height属性会增加包含div元素的大小，这似乎与mozilla网站中的语句相矛盾。因此，如果有任何可以澄清线高的实际情况，我将非常感激。

由于

Answer 1

这并不矛盾。在div上设置line-height属性会将相同的line-height属性应用于所有内联子项。因此，在您的示例中，通过在div上设置line-height属性，display: inline的所有子元素都将应用新的行高。当这些子元素的高度增加时，父div的高度会增加，以便能够包含子元素。

Answer 2

当我们想要沿y轴对齐块元素时，实际给出了行高。

例如，我在

w3schools

中有单行文字，并且参与高度为20px。该段落将以其自己的默认方式编写，但如果我使用line-height等于段落的高度，则

中的文本表示W3schools将沿y轴在中间对齐。如果您想要水平对齐（x轴对齐）文本，则text-align：center用于此目的。

请记住，行高并不完全取决于其自身元素高度的高度。但它改变如下。

如果您有单行文字，

高度为20px，则提供行高：20px以垂直对齐文本或垂直对齐文本。
如果您有两行文字，

高度为20px，则给出行高：10px，使用小填充顶部垂直对齐文本。

我希望这会让你振作起来。而且我认为您不需要再浏览谷歌了。如果您想要更多解释，那么我会给你jfiddle代码。：）

了解css line-height属性

2 个答案: