display: inline-block; position: relative;

### CSS `display: inline-block` 和 `position: relative` 的使用

#### 使用方法

当元素被定义为 `display: inline-block;` 时，该元素会像行内元素一样在同一行显示，并且可以设置宽度和高度[^2]。

对于相对定位 (`position: relative`)，它允许基于元素正常位置进行偏移而不脱离文档流。这意味着可以通过 top, bottom, left 或 right 属性调整其相对于原始位置的位置：

.item {
    display: inline-block;
    position: relative;
}

此组合使得可以在不破坏页面结构的情况下微调单个组件的位置，同时保持这些项目按照行内块级行为排列的能力。

#### 解决常见问题

有时，在应用 `inline-block` 后会出现垂直间距或对齐方面的问题。这是因为默认情况下浏览器会在行内元素间加入空白字符所造成的间隙[^3]。为了消除这种不必要的空间，有几种策略可用:

- **去除HTML中的空白符**：通过删除相邻的 HTML 标签之间的空格来减少视觉上的缝隙。

- **字体大小设为零**：父容器内的 font-size 设置成 0px 可以防止子元素间的额外间隔出现；不过记得给实际文本重新设定合适的字号。

- **负边距法**：利用 margin 负值抵消掉因为空白节点带来的错位效果。

另外值得注意的是，如果遇到上下边缘不对齐的情况，则可能是因为基线对齐 (baseline alignment) 导致的。此时可通过显式指定 vertical-align 属性修正这一现象，例如将其设为 middle 或者 top 来获得更好的一致性。

.item {
    display: inline-block;
    position: relative;
    vertical-align: middle; /* 改善对齐 */
}