两个并排出现空隙主因是inline-block下html换行符被渲染为空格，flex布局可彻底避免该问题；其他方案包括同行列写、font-size:0、负margin等。
为什么两个 <div> 并排出现却有空隙
<p>这不是浏览器“加了间隔”，而是默认把 <code><div> 当作块级元素，天然换行；如果你看到“两个色块之间有空白”，大概率是用了 <code>inline-block 或 float，但没处理好 HTML 换行符或默认行高带来的间隙。
display: inline-block 下的换行符会变成空格
display: inline-block 下的换行符会变成空格HTML 中两个 <div> 写成多行，中间的换行和缩进会被渲染为一个空格字符，而 <code>inline-block 会把它当真实空白处理，导致约 4px 间隙。
解决方法（任选其一）：
- 把两个标签写在同一行：
<div class="box"></div> <div class="box"></div> - 父容器设
font-size: 0，子元素再单独设字体大小 - 用
margin-left: -4px往回拉（不推荐，脆弱且依赖具体渲染）
用 flex 是最干净的解法
Flex 布局完全绕过文本流间隙问题，也不用 hack 字体大小或手动负边距。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 给父容器加
display: flex - 去掉子元素的
display: inline-block或浮动 - 如果需要等宽铺满，加
flex: 1到每个子项；如果只是紧挨着，什么都不用加也默认无间隙
示例：
.container { display: flex; }
.box { width: 100px; height: 100px; background: #333; }
别忘了检查 margin 和 border
有时候你以为是“没间隔”，其实是两个色块的 margin 撞上了——比如左边块右 margin: 10px，右边块左 margin: 10px，视觉上就是 20px 空白。
还有容易被忽略的：
-
box-sizing默认是content-box，加border会让实际宽度变大，挤出意外空隙 - 父容器有
padding，而子元素没设width: 100%，也可能造成错觉 - 某些 CSS 重置库（如 normalize.css）会悄悄改
vertical-align，影响inline-block对齐
真正“没间隔”的核心就一条：让它们不参与文本流，或者确保文本流里没有空格、换行、margin 抵消。flex 是现在最稳的选择，inline-block 的坑全在看不见的空白字符里。
