-1

我正在使用以下站点的 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%;
}

我试图了解 line-height 并阅读了以下内容：

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

从：

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

但有趣的是，在上面来自 w3schools 的示例中，更改 line-height 属性会增加包含 div 元素的大小，这似乎与 mozilla 站点中的声明相矛盾。因此，如果有人能提供澄清线高的实际作用，我将不胜感激。

谢谢

4

2 回答 2

0

当我们想要沿 y 轴对齐块元素之间时，实际上给出了 line-height。

例如，我有一个单行文本

w3schools

段高度为 20px。该段落将以自己的默认方式编写，但如果我使用 line-height 等于段落的高度，则文本输入

假设 W3schools 将沿 y 轴在中间对齐。如果你想水平对齐（x 轴对齐）你的文本，那么 text-align:center 用于此目的。

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

  1. 如果您有单行文本，

    height 为 20px 然后给 line-height: 20px 以垂直对齐文本或文本的垂直中间。

  2. 如果你有两行文字，

    高度为 20px，然后给出 line-height:10px 并使用小的 padding-top 垂直对齐文本。

我希望这会让你振作起来。我认为你不需要更多地浏览谷歌。如果您需要更多解释，那么我会给您 jfiddle 代码。:)

于 2013-03-13T17:40:55.840 回答
0

It's not contradictory. Setting the line-height property on a div will apply the same line-height property to all inline children. So in your example, by setting the line-height property on the div, any child elements that are display: inline will have the new line-height applied to them. When the height of those child elements is increased, the height of the parent div increases to be able to contain the child elements.

于 2013-03-13T17:27:41.033 回答