【问题标题】：Inline-block <div> pushed down outside of parent, height more than parent despite height: inherit;内联块 <div> 在父级之外向下推，尽管高度超过父级，但高度：继承；
【发布时间】：2016-12-27 06:30:37
【问题描述】：

问题

.nav-item<div>s 的高度高于其父代 - 尽管 height: inherit;。
.nav-item<div>s 被推到其父级之外，尽管没有任何边距或填充。

HTML

<div id="nav">
    <h1>A website</h1>
    <div class="nav-item">
        <p>Item 1</p>
    </div>
    <div class="nav-item">
        <p>Item 2</p>
    </div>
    <div class="nav-item">
        <p>Item 3</p>
    </div>
</div>

CSS

#nav {
    height: 75px;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    position: fixed;
    background-image: url('img/gradient.png');
    padding: 0;
}    

#nav h1 {
    top: 8px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    font-size: 42px;
    font-family: 'Francois One', Impact, Futura, sans-serif;
    color: rgb(255,255,255);
    display: inline;
}

#nav .nav-item {
    display: inline-block;
    height: inherit;
    padding: 10px;
    margin: 0;
    background: blue;
}

#nav .nav-item p {
    font-family: 'Francois One', Impact, Futura, sans-serif;
    margin: 0;
}

结果

【问题讨论】：

你希望它是什么样子的？

标签： html margin padding css

【解决方案1】：

这里发生的事情与预期一致。高度不会被继承，由text-alignment、padding 和margin 宽度计算得出。请这样做：

删除padding 顶部和底部。
删除margin 顶部和底部。
将vertical-align: top; 添加到.nav-items。

解决方案

CSS

#nav .nav-item {margin: 0; padding: 0 10px; vertical-align: top;}

预览：

小提琴：http://jsfiddle.net/praveenscience/vnfdv9bj/

【讨论】：

【解决方案2】：

将vertical-align:top 和box-sizing:border-box 添加到您的.nav-item：

#nav {
    height: 75px;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    position: fixed;
    background-image: url('img/gradient.png');
    background:#ff00ff;
    padding: 0;
}    

#nav h1 {
    top: 8px;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    font-size: 42px;
    font-family: 'Francois One', Impact, Futura, sans-serif;
    color: rgb(255,255,255);
    display: inline;
}

#nav .nav-item {
    display: inline-block;
    height: inherit;
    padding: 10px;
    margin: 0;
    background: blue;
    vertical-align:top;
    box-sizing:border-box;
}

#nav .nav-item p {
    font-family: 'Francois One', Impact, Futura, sans-serif;
    margin: 0;
}

<div id="nav">
    <h1>A website</h1>
    <div class="nav-item">
        <p>Item 1</p>
    </div>
    <div class="nav-item">
        <p>Item 2</p>
    </div>
    <div class="nav-item">
        <p>Item 3</p>
    </div>
</div>

JSFiddle Demo

【讨论】：

感谢您的回答！

【解决方案3】：

或者你也可以简单地删除height:inherit; :)

【讨论】：

这实际上并没有回答用户的问题，因为它没有解释为什么存在不需要的行为。您的解决方案也没有真正解决问题。
他对这个问题不是很清楚，如果继承被删除，导航项会留在父 div 内而不会溢出
OP 非常清楚这个问题。给出了 3 个特定的不良行为。接受的答案是正确的，因为它正确地解决了所有 3 点......特别是理解高度也受到填充和边距的影响。只是为了将来的答案要记住的事情:)
我从来没有说过接受的答案是错误的，我的解决方案（我承认我没有解释）导航项具有正常高度并且不与他的父母重叠，用户只是说两个问题我从未谈论过可接受的解决方案，但感谢您的建议
提供高质量的答案是一项学习技能。我之所以提到它，是因为即使是未接受的答案也可能对遇到类似问题的其他用户提供非常有价值的信息。考虑提高帖子的质量，而不是简单地捍卫你的答案。这是 StackOverflow 上成功的关键！事实上，通常格式良好的不被接受的答案可能会很快为您提供有价值的代表点。