高度小于子元素的父元素

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

<span> 标签在 <li> 标签内。您关心的是高度实际上是由于文本的字体大小 64px. 至于您对 <li> 与其内容之间的间距的关注，它是 [=11 之间的默认最小间距=] 及其内容。你的代码没有问题。我尝试并在您的代码上花费了半小时，但无法减少默认间距。希望它是清楚的。

编辑：

我在 jsfiddle 中没有看到任何东西，因此我在 Dreamweaver 中创建了一个 html 并在 Firefox 中输出，我没有看到你说的 span 大于 font-size 你可以看到在下图中

Answer 2

您的 span 有一个 1 px 的边框，父级 li 在计算高度时选择了它。在我的例子中，span 的高度为 73px（内容“0”的字体大小），li 的高度为 74px（span 的内容 + span 的边框）。

Answer 3

Live demo

child比parent高的原因是字体classfontastic有line-height = 1。换句话说，child 告诉 parent 我的行高是 1，但实际上它占用了更多。要解决此问题，您可以设置 line-height = 1.2

高度小于子元素的父元素

Parent of smaller height than child element

html

css

position

height

html-lists