为何我的div存在神秘右侧外边距？#inner3与#inner4无法并排

兄弟，太懂这种卡2小时越调越懵的崩溃感了！结合你说的情况，给你列几个大概率能解决问题的排查方向，都是我踩过的坑：

1. 先检查盒模型计算方式 #

这种“看不见的间距”很多时候是默认盒模型搞的鬼：默认box-sizing: content-box时，元素的宽高只算内容区，padding、border会额外撑开尺寸，哪怕你没设margin，两个元素的总宽度也可能悄悄超过容器，导致没法并排。

快速解决：给这两个div加上：

#inner3, #inner4 {
  box-sizing: border-box;
}

嫌麻烦的话直接全局统一设置，彻底避免后续踩坑：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. 排查inline-block的空白字符陷阱 #

如果你是用display: inline-block来实现并排，HTML里两个div之间的换行、空格会被浏览器解析成空白字符，占走一部分宽度！比如：

<div id="inner3">内容</div>
<div id="inner4">内容</div>

这种写法里的换行就是罪魁祸首。解决方法选一个就行：

• 把两个div强行写在同一行：<div id="inner3">内容</div><div id="inner4">内容</div>
• 给父元素设font-size: 0，再给子元素重新设置正常字体大小
• 用注释消除空白：<div id="inner3">内容</div><!-- --><div id="inner4">内容</div>

3. 隐性的width: 100%在搞事 #

块级元素默认会继承width: 100%，哪怕你没手动设置，浏览器也会让它占满父容器宽度，自然没法和另一个div并排。

检查方法：打开Chrome开发者工具的Computed面板，看看这两个div的实际宽度是不是等于父容器宽度？如果是，赶紧给它们设一个明确宽度（比如width: 50%，或者固定像素值），再搭配浮动或弹性盒布局。

4. 直接换Flex布局（最省心的方案） #

要是折腾浮动、inline-block都没用，直接换Flex布局，现代浏览器全支持，能避开一堆奇怪的兼容性问题：

给它们的父容器加：

.parent-container {
  display: flex;
}

然后给#inner3和#inner4设置合适的宽度（比如flex: 1让它们平分宽度，或者固定宽），瞬间就能并排，还不用管浮动清除、空白字符这些破事。

最后排查冷门点：伪元素或overflow #

有时候父元素的overflow: hidden，或者元素本身的伪元素（:before/:after）会偷偷占宽度，你可以在开发者工具里临时禁用这两个div的伪元素，看看是不是它们在搞鬼。

内容的提问来源于stack exchange，提问作者Hungus Bungus