行内块级元素

Docs

display - CSS：层叠样式表 | MDN (mozilla.org)

行内块级元素（inline-block）就是同时具备内联元素、块状元素的特点，代码 display: inline-block; 就是将元素设置为行内块级元素。

display: inline-block; 生成块级元素盒，如果它是一个单独的内联盒，它将盒周围的内容一起流动（行为类似于替换元素）。它等同于 inline flow-root。

行内块级元素 inline-block 元素特点：

1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高以及顶和底边距都可设置。