display: inline-block; 高度超出向下

当使用`display: inline-block;`时，元素会以块级元素的方式显示，但是仍然保留了行内元素的特性。这意味着，元素会在同一行内显示，并且可以设置宽度、高度、内边距和外边距等属性。

当设置了`display: inline-block;`的元素的高度超出了其容器的高度时，会出现向下溢出的情况。这是因为行内块元素默认是按照基线对齐的，而不是顶部对齐。所以，如果元素的高度超出了容器的高度，它会向下溢出。

解决这个问题的方法有两种：

1. 设置`vertical-align: top;`：通过将元素的垂直对齐方式设置为顶部对齐，可以使元素的内容从顶部开始显示，而不是基线对齐。例如：

.container {
  height: 200px;
}

.element {
  display: inline-block;
  vertical-align: top;
}

2. 使用`overflow: hidden;`：通过设置容器元素的`overflow`属性为`hidden`，可以隐藏超出容器高度的部分。例如：

.container {
  height: 200px;
  overflow: hidden;
}

.element {
  display: inline-block;
}

以上两种方法都可以解决`display: inline-block;`元素高度超出向下的问题。