CSS中无内外边距时父子div边框间出现空白间隙是什么原因？

问题原因 #

这个间隙是HTML代码里标签之间的换行、缩进生成的空白文本节点导致的。

你写的.parent和.child标签之间有换行和空格，浏览器会把这些连续空白字符解析成一个看不见的空白文本节点。它虽然没有实际内容，但会继承父元素默认的字体大小和行高，本身会占一点高度，把下面的.child往下挤了一段，就出现了你看到的两个边框之间的空白。

额外提一句你可能没注意的点：你给父子都设了width:5rem、box-sizing:border-box，但父元素有3px边框，所以父的内容区实际宽度是5rem - 6px，子元素总宽度刚好是5rem，会比父内容区宽6px，所以子元素会向右、向下各溢出3px，这个是宽高设置的问题，和你问的间隙无关，按需调整子宽高就可以。

修复方法 #

随便选一种操作就能去掉间隙：

• 把HTML的换行删掉，写成紧凑写法：<div class="parent"><div class="child"></div></div>
• 给.parent加font-size: 0样式，让空白文本节点不再占高度

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