Html 缺少几个像素的css高度

我正在尝试使用

display:inline block

、

height:50px

和

margin 25px

顶部和底部创建跨距。包装器div的高度为100px，并具有

溢出：auto

属性

即使跨距高度+页边距顶部+页边距底部=封套div高度，也会出现垂直滚动条

我知道给出最小高度可以解决这个问题，但我很想知道我在整个过程中丢失了多少像素

请参阅下面的或演示：

*{
保证金：0；
填充：0；
}
html，
身体{
宽度：100%；
身高：100%；
}
#我的工具栏{
背景：浅灰色；
宽度：100%；
高度：100px；
溢出：自动；
空白：nowrap；
}
.工具栏项{
显示：内联块；
宽度：15%；
高度：50px；
利润率：25px2.5%；
背景颜色：绿色；
框大小：边框框；
边界：0；
}

---

默认情况下，内联和内联块元素使用

垂直对齐：基线设置

将
vertical align
值更改为top/middle/bottom，这样就不会有更有趣的行为


基线

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

CSS/HTML/Demo

使用垂直对齐：顶部


*{
保证金：0；
填充：0；
}
html，
身体{
宽度：100%；
身高：100%；
}
#我的工具栏{
背景：浅灰色；
宽度：100%；
高度：100px；
溢出：自动；
空白：nowrap；
}
.工具栏项{
显示：内联块；
宽度：15%；
高度：50px；
利润率：25px2.5%；
背景颜色：绿色；
框大小：边框框；
边界：0；
垂直对齐：顶部；
}

内联块
元素受
行高的影响。您尝试过吗？在#myToolbar类中添加溢出：隐藏@马蒂让它们浮动忽略了空白：没有包裹。无论如何，谢谢你的建议。通过添加垂直对齐：Top，问题得到了解决。默认基线值是导致内联元素大量混淆的原因！