缺少幾個像素的CSS高度

Question

我正在嘗試創建與display:inline-block,height:50px和margin 25px頂部和底部的跨度。包裝div的高度爲100px，並具有overflow: auto屬性。

儘管跨度+ margin-top + margin-bottom =包裝div的高度，縱向滾動顯示。

我知道給予最小高度可以解決這個問題，但我很想知道我在整個過程中失去了幾個像素。

請參閱fiddle here或下面的演示：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#myToolbar { 
 
    background: lightgrey; 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
} 
 
.toolbar-item { 
 
    display: inline-block; 
 
    width: 15%; 
 
    height: 50px; 
 
    margin: 25px 2.5%; 
 
    background-color: green; 
 
    box-sizing: border-box; 
 
    border: 0; 
 
}

<div id="myToolbar"> 
 
    <span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span> 
 
</div>

Answer 1

默認情況下，內聯和inline-block的元素設定vertical-align: baseline。

將vertical-align的值更改爲top/middle/bottom並且不會有更多有趣的行爲。

From the MDN:

基線

對齊與其父的基線的元件的基線。 HTML規範沒有指定一些替換元素的基線，如<textarea>，這意味着它們與此關鍵字的行爲可能會從一個瀏覽器更改爲另一個。

CSS/HTML /演示

使用vertical-align: top

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#myToolbar { 
 
    background: lightgrey; 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
} 
 
.toolbar-item { 
 
    display: inline-block; 
 
    width: 15%; 
 
    height: 50px; 
 
    margin: 25px 2.5%; 
 
    background-color: green; 
 
    box-sizing: border-box; 
 
    border: 0; 
 
    vertical-align: top; 
 
}

<div id="myToolbar"> 
 
    <span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span> 
 
</div>