inline-block元素可设宽高且同行排列，通过margin控制间距，需处理换行导致的默认空白，适用于导航栏等水平布局场景。
在CSS布局中，inline-block 是一种常用的显示方式，适合创建水平排列的元素，比如导航菜单、图片列表等。它结合了块级元素和行内元素的特点：可以设置宽高，又能像文字一样排成一行。利用 margin 控制这些元素之间的间距，是一种简单且有效的做法。
inline-block 元素的基本特性
将元素的 display 设置为 inline-block 后，该元素会：
- 保有块级元素可设宽高的能力
- 不会独占整行，能与其他 inline 或 inline-block 元素并排显示
- 受文本对齐属性（如 text-align）影响
div {
display: inline-block;
width: 100px;
height: 50px;
}使用 margin 控制间距
给 inline-block 元素添加 margin，可以直接控制它们之间的空隙。例如：
span {
display: inline-block;
margin-right: 20px;
}这样每个 span 元素右侧都会留出 20px 的空白，形成统一间隔。
立即学习“前端免费学习笔记（深入）”；
如果不想最后一个元素也带间距，可以配合 CSS 选择器清除：
span:last-child {
margin-right: 0;
}注意默认间距问题
由于 inline-block 元素按文本处理，HTML 中的换行或空格会被渲染成一个空格，导致元素间出现意外空白。这常被误认为是 margin 没控制好。
解决方法有几种：
- 将 HTML 标签写在同一行：
<span>A</span><span>B</span> - 父容器设置
font-size: 0，子元素再重设字体大小 - 使用注释消除空格：
<span>A</span><!-- --><span>B</span>
实际应用场景示例
构建水平导航栏时非常实用：
.nav-item {
display: inline-block;
padding: 10px 15px;
margin: 0 10px;
background-color: #eee;
}
.nav-item:first-child {
margin-left: 0;
}
配合父容器 text-align: center，还能轻松实现居中对齐的按钮组。
基本上就这些。inline-block 配合 margin 虽然不如 Flex 布局灵活，但在简单场景下兼容性好、代码简洁，依然值得掌握。关键是处理好那个“看不见的空格”。
