缩小屏幕时两个div元素间出现异常行间隙，请求排查原因

缩小浏览器屏幕尺寸时，两个div元素之间出现奇怪的行间隙，已通过* { margin: 0; padding: 0; }重置所有元素的内外边距，但问题仍未解决。

代码示例 #

CSS代码 #

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    background-color: black;
}

.child {
    width: 100%;
    height: 150px;
    background-color: #8540de;
}

HTML代码 #

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
</div>

问题截图 #

• 小屏幕视图：
• 大屏幕视图：

针对这个问题，主要有两种可能的原因及对应解决办法：

1. HTML空白字符引发的间隙 #

你的HTML中两个.child div之间存在换行和缩进（空白字符），浏览器会将其解析为文本节点。虽然.child是块级元素，但容器.container默认的line-height会让这个文本节点占据一定高度，在小屏幕下这个间隙会更明显。

解决办法：

• 方法一：移除两个.child之间的空白字符，修改HTML为：

<div class="container">
    <div class="child"></div><div class="child"></div>
</div>

• 方法二：给.container设置font-size: 0，消除文本节点的高度（如果容器内有文本，需给子元素重新设置font-size）：

.container {
    width: 100%;
    background-color: black;
    font-size: 0;
}

2. 浏览器像素渲染精度问题 #

当窗口缩小到特定尺寸时，浏览器在渲染整数/非整数像素换算时可能出现误差，导致1px左右的间隙（常见于高DPI屏幕或页面缩放场景）。

解决办法：

• 给.child添加transform: translateZ(0)触发GPU加速，修复渲染偏差：

.child {
    width: 100%;
    height: 150px;
    background-color: #8540de;
    transform: translateZ(0);
}

• 或者临时用margin-top: -1px抵消间隙（仅适用于确认是1px间隙的情况）。

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