inline-block: 同行显示但是具有块级元素的特性

inline-block 是一种 CSS 属性，它允许元素在同一行显示，但是具有块级元素的特性，例如块级元素可以设置宽度、高度，也可以添加边距和内边距。inline-block 可以取代传统的 float属性来实现同行显示的效果，由于 inline-block 的特性，它也可以很好地设置元素的垂直对齐方式。

如何使用 inline-block

可以通过 CSS display 属性将元素设置为 inline-block，例如：

display: inline-block;

此时，元素将在同一行显示，但是它可以设置宽度、高度、边距、内边距和其他 CSS 样式属性，与传统的 inline 元素相比，具有更多的布局自由度。

解决 inline-block 的间隙问题

当在 HTML 标记中使用了 inline-block 属性时，通常会发现元素之间存在一些间隙，这种情况是由于 HTML 标记中元素之间的空格所导致的。

可以通过以下几种方式来解决这个问题：

• 删除 HTML 标记中元素之间的空格
• 使用 HTML 注释来避免空格出现
• 将 HTML 标记写成连续的行

例如：

<!-- 使用注释来避免空格 -->
<div class="inline-block">元素 1</div><!-- 
--><div class="inline-block">元素 2</div>

或者：

<!-- 写在同一行 -->
<div class="inline-block">元素 1</div><div class="inline-block">元素 2</div>

inline-block 的垂直对齐方式

由于 inline-block 既可以设置 width，又可以设置 height，因此，垂直对齐方式对于 inline-block 元素非常重要。

在 CSS 中，可以使用 vertical-align 属性来设置垂直对齐方式。这个属性可以设置为如下值：

• baseline：基线对齐
• top：顶部对齐
• middle：中心对齐
• bottom：底部对齐

例如：

.vertical-align {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background-color: #eee;
}

在上述代码中，将 display 设置为 inline-block，将垂直对齐方式设置为 middle，可以在同一行中显示两个元素，并使它们垂直居中对齐。

小结

使用 inline-block 属性可以让元素在同一行中显示，但是具有块级元素的特性，它可以设置元素的宽度、高度、边距、内边距和其他样式属性。通过 vertical-align 属性可以实现 inline-block 元素的垂直对齐。同时，需要注意的是，要避免在 HTML 标记中添加空格，否则会出现间隙问题。