inline-block布局下两个div被强制换行的原因排查

数据老陈

2026-4-21

嗨，这个问题我刚学CSS的时候也踩过一模一样的坑！你猜怎么着？罪魁祸首其实是HTML代码里两个div之间的空白字符！

你用了inline-block之后，这两个div会像行内元素（比如<span>）一样对待——浏览器会把它们之间的换行、空格甚至制表符都解析成一个空格字符，这个空格虽然看起来不起眼，但它是占宽度的！

你算一下：30vw + 70vw刚好是100vw，但再加上这个空格的宽度，总宽度就超过了视口的100vw，浏览器自然就把右边的div挤到下一行去了。而且你用box-sizing: border-box只解决了border不会额外占宽度的问题，但管不了这个inline-block自带的空白问题。

给你几个实用的解决方案，选哪个看你需求：

直接干掉HTML里的空白：把两个div写在同一行，或者用注释把中间的空白“吃掉”，比如：

<div class="left-column"></div><div class="right-column"></div>
<!-- 或者用注释隔开 -->
<div class="left-column"></div><!--
--><div class="right-column"></div>

父元素设font-size: 0：空白字符的大小由父元素的字号决定，把父元素（比如body或者包裹这两个div的容器）的font-size设为0，然后在子div里重新设置需要的字号（如果有文字的话）：
```
body {
  font-size: 0;
}
.left-column, .right-column {
  font-size: 16px; /* 恢复正常字号 */
}
```
改用Flex布局：现在做这种等分栏布局，Flex才是更省心的选择，完全不用管这些inline-block的奇怪问题。给父容器加个display: flex，两个div的宽度保持30vw和70vw，自动就会并排：
```
.container {
  display: flex;
}
```
负margin hack（不推荐）：给右边的div加个负的左margin，比如margin-left: -0.25em，抵消掉空白的宽度，但这个方法依赖字体，不同浏览器/字体下空白宽度可能不一样，容易出问题。