html - 缺少几个像素的 css 高度

Question

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

即使 span 的高度 + 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

默认情况下，行内和行内 block 元素设置为 vertical-align: baseline .

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

From the MDN:

baseline

Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea> is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.

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>