小元素在行内布局中易挤在一起，因默认 inline 元素受字体基线和 vertical-align: baseline 影响，导致垂直对齐不一致；推荐用 inline-block + vertical-align 或 flex + gap 统一控制间距。
小元素在行内布局中为什么容易挤在一起
因为默认的 display: inline 元素会受字体基线（baseline）影响，上下留白不一致，加上默认 vertical-align: baseline，导致视觉间距忽大忽小。哪怕只写 margin: 4px，实际垂直对齐效果也常和预期不符。
- 文字、
input、button、img等天然行内或替换元素最常踩这个坑 -
padding能撑开自身尺寸，但对行高（line-height）无直接影响；margin在行内方向上可能被合并或忽略（比如margin-top/bottom对inline元素无效） - 用
vertical-align: middle或top替代baseline，配合line-height统一控制高度基准
用 display: inline-block + vertical-align 控制小元素间距
这是最可控的折中方案：保留行内流特性，又获得块级盒模型能力。关键不是盲目加 padding 或 margin，而是先统一垂直对齐基准。
- 必须显式设置
vertical-align: middle（或top/bottom），否则仍走 baseline -
font-size: 0在父容器上可消除inline-block间的空格间隙，但需重置子元素font-size -
margin在inline-block上完全生效，横向用margin-right，纵向用margin-top配合vertical-align
.btn-group {
font-size: 0;
}
.btn-group > * {
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-right: 8px;
}当需要真正等距时，优先用 flex 替代 padding/margin 手动计算
靠反复调 padding 和 margin 实现“一致间距”，本质是反模式——尤其在响应式或字号变化时极易错位。Flex 布局让间距逻辑从“每个元素自己算”变成“容器统一分发”。
-
gap属性直接定义项目间间距，不干扰盒模型，且支持row-gap/column-gap独立控制 - 避免给子元素设
margin，否则和gap叠加导致双倍间距 - 小元素如图标按钮、标签徽章，用
flex: 0 0 auto防止意外拉伸
.tag-list {
display: flex;
gap: 6px;
}
.tag-list > * {
flex: 0 0 auto;
}兼容性差的场景下，padding 比 margin 更可靠
IE10–11 不支持 gap，旧版 Safari 对 inline-block 的 vertical-align 渲染也有偏差。此时若必须手动控制，padding 是更稳的选择：它始终作用于元素自身盒内，不受兄弟元素影响，也不会因折叠（collapsing）失效。
立即学习“前端免费学习笔记（深入）”；
- 横向间距优先用
padding-right（最后一个元素除外），比margin-right更易预测 - 垂直方向若需统一高度，直接设
height+line-height，再用padding微调内边距，比依赖margin-top安全 - 慎用
margin的负值来“抵消”间隙——它会让布局脆弱，且在缩放或字体加载时容易闪动
小元素布局真正的难点不在“怎么加间距”，而在“谁该负责间距”。靠子元素自己用 padding 或 margin 去凑，很快就会陷入像素级调试；把控制权交给父容器（flex、grid 或至少 inline-block + vertical-align），才能让间距真正稳定下来。
