Question

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

即使span的高度+ margin-top + margin-bottom =包装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

默认情况下，内联块和内联块元素使用vertical-align: baseline设置。

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

From the MDN:

基线

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

CSS / HTML / Demo

使用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>

缺少几个像素的css高度

1 个答案: