缺少几个像素 css 高度

Question

我正在尝试使用display:inline-block、height:50px 和margin 25px 顶部和底部创建跨度。包装器 div 的高度为 100px，并具有 overflow: auto 属性。

即使 span 的高度 + margin-top + margin-bottom = wrapper div 的高度，也会出现垂直滚动。

我知道给出 min-height 可以解决问题，但我很想知道在整个过程中我在哪里丢失了几个像素。

请查看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 和 inline-block 元素设置为vertical-align: baseline。

将vertical-align 的值更改为顶部/中间/底部，不会有更多有趣的行为。

From the MDN:

基线

将元素的基线与其父元素的基线对齐。一些被替换元素的基线，如<textarea> 没有在 HTML 规范中指定，这意味着它们使用此关键字的行为可能会从一个浏览器更改为另一个。

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>