html - div总是从父级获取行高

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”中的链接未获得 line-height:20px。它从主“父”div 获取 line-height:55px。我尝试输入 !important，但不起作用。

但是当我把 line-height 放在 li 上时，它就起作用了。

Answer 1

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

Demo

Demo (当 child 继承 parent 行高)

---

如果您希望子元素粘贴父文本，那么我认为您没有使用正确的属性，您应该改用 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;
}

---

如果这就是你在文档中得到的全部内容，那你就错了，它在任何情况下都不起作用，那么特异性对你来说可能是个问题，我不能打赌，因为我没有您身边有足够的资源。