html - 内联 block <div> 向下推到父级之外，尽管高度为 : inherit;，但高度仍高于父级

Question

问题

1. .nav-item <div> s 的高度比他们的 parent 高 - 尽管 height: inherit; .
2. .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;
}

结果

Answer 1

这里发生的事情正如预期的那样。高度不会被继承，由text-alignment、padding 和margin 宽度计算。请这样做:

1. 移除 padding 顶部和底部。
2. 移除 margin 顶部和底部。
3. 将 vertical-align: top; 添加到 .nav-item 中。

解决方案

CSS

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

预览:

fiddle :http://jsfiddle.net/praveenscience/vnfdv9bj/