在html中如何把两个色块没有间隔

两个并排出现空隙主因是inline-block下html换行符被渲染为空格，flex布局可彻底避免该问题；其他方案包括同行列写、font-size:0、负margin等。

为什么两个 <div> 并排出现却有空隙 <p>这不是浏览器“加了间隔”，而是默认把 <code><div> 当作块级元素，天然换行；如果你看到“两个色块之间有空白”，大概率是用了 <code>inline-block 或 Float，但没处理好 HTML 换行符或默认行高带来的间隙。

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 的坑全在看不见的空白字符里。