Question

考虑一下：

<div id="parent">
    This is some text
    <div id="child">
        <ul><li><a href="#">test</a></li></ul>
        This some other text
    </div>
</div>

CSS：

#parent{line-height: 55px}
#child{line-height: 20px}
ul{ margin:0; padding:0; list-style:none}

问题：div“child”中的链接未达到行高：20px。它的线高：55px来自主“父”div。我尝试过！重要但不起作用。

但是当我把线高度放到li上时，它就会起作用。

Answer 1

谁说它没有得到line-height: 22px;？父元素的line-height将#child向下推。

Demo

Demo （当孩子继承父母line-height时）

如果您希望子元素粘贴父文本，而不是我认为您没有使用正确的属性，则应使用padding-top代替。

#parent {
    padding-top: 30px;
    border: 1px solid #f00;
}
#child {
    border: 1px solid #000;
}

Demo

在您修改了问题后，它仍然按预期工作，我不知道是什么让您认为它不起作用。在下面的示例中，我故意为演示目的添加了更多line-height。

Demo （编辑完问题后）

#parent {
    line-height: 55px;
    border: 1px solid #000;
}
#child {
    line-height: 100px;
    border: 1px solid #0f0;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
}
ul li {
    border: 1px solid #f00;
}

如果这就是你在文档中得到的所有东西，而不是你错了，它在任何情况下都不起作用，特殊性可能对你来说是一个我不能赌的问题，因为我不会＃ 39;你有足够的资源。

div始终从父级获取行高

1 个答案: