Question

我正在尝试制作类似于this website上的侧边菜单的内容。我目前遇到#parent列表元素高度的问题，因为我希望它与其内容的高度完全相同（#child span - 请参阅此jsfiddle）。

<body>
<article class="full-height row">
    <nav id="nav-container" class="full-height row col-sm-3">
        <div class="col-sm-4 full-height"></div>
        <ul id="nav-button" class="col-sm-8 full-height vcenter">
            <li class="vcentered active"><span class="fontastic">0</span></li>
        </ul>
        <ul id="nav-navbar" class="col-sm-8 full-height display-none">
            <li>Projects</li>
            <li>Passions</li>
            <li>Close</li>
        </ul>
    </nav>
    <section>
    </section>
    <canvas class="full-height"></canvas>
</article></body>

#child元素没有指定任何css定位，也没有z-index或float属性，因此不应从其上下文中删除它。我不明白为什么#child元素比#parent更高。

这是在Chrome 39.0.2171.95 m

下执行的

感谢您的回答！

Answer 1

<强> Live demo

孩子比父母高的原因是字体类fontastic有line-height = 1。换句话说，孩子告诉父母我的行高是1，但事实上它正在花费更多。要解决此问题，您可以设置line-height = 1.2

Answer 2

<span>标记位于<li>标记内。您关心的是高度，这实际上是由64px.文本的字体大小引起的。就您对<li>与其内容之间的间距的关注而言，它是{{1}之间的默认最小间距及其内容。您的代码没有问题。我尝试了半小时代码，但无法减少默认间距。希望很清楚。

修改

我在jsfiddle中没有看到任何内容因此我在fireweaver中创建了一个html并在firefox中输出，我看不出你说的<li>大于span你可以在下面的图片中看到

Answer 3

您的span边框为1像素，父母li在计算高度时会选择该边框。在我的情况下，span高度为73px（内容大小为“0”，字体为），li高度为74px（跨度内容+跨度边框）。

高度小于子元素的父级

3 个答案: