HTML CSS中正方形100%填充div容器出现右下方空白问题

你遇到的这个问题有两个常见成因：

• 绝对定位元素缺少显式偏移声明：你代码中的.face仅设置了position: absolute，没有指定top: 0、left: 0这类定位偏移属性。虽然大部分浏览器会默认把未设置偏移的绝对定位元素放在其原本的常规流位置，也就是父元素的左上角，但不同浏览器的渲染逻辑存在细微差异，部分场景下会出现微小的位置偏移，导致右边和底部露白。
• 亚像素渲染误差：如果你的设备是高DPI屏幕，或者当前浏览器的缩放比例不是100%，CSS像素和设备物理像素换算时会出现半像素的情况，浏览器对父容器边框和内部蓝色块的渲染对齐出现偏差，视觉上就会出现细空白。

最稳妥的修复方式是直接给绝对定位的.face指定四个方向都贴边：

.face {
  position: absolute;
  /* 等价于 top: 0; right: 0; bottom: 0; left: 0 */
  inset: 0;
  width: 100%;
  height: 100%;
}

如果修改后仍然有渲染缝隙，可以额外给蓝色块加1px的尺寸抵消误差：

.face {
  position: absolute;
  inset: 0;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
}

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