设置0.1rem上下padding时，图片上下间距像素值不一致的技术疑问

复现代码 #

CSS #

.box{
  background-color: red;
  padding: 0.1rem 1rem;
}
img{
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

HTML #

<div class="box">
  <div class="logo">
    <img src="https://picsum.photos/200" alt="">
  </div>
</div>

现象对比 #

• 当设置padding: 0.1rem 1rem时，图片上下间距分别为8像素和4像素：
  

• 当设置padding: 0.2rem 1rem时，图片上下间距均为12像素：
  

问题 #

为何使用0.1rem设置上下内边距时，图片的上下间距像素值会出现不一致的情况？

原因分析 #

这种差异本质是非整数像素的渲染取整规则，结合行盒布局特性共同导致的：

• rem转像素的非整数问题：rem是基于根元素字体大小的相对单位，0.1rem换算成物理像素时，大概率得到非整数值（比如默认根字体16px时，0.1rem=1.6px）。物理屏幕最小显示单位是1像素，浏览器必须对非整数值进行取整处理。
• 行盒布局的叠加效应：图片设置了vertical-align: middle，会基于父元素行盒的基线对齐。块级父元素（.logo）默认行高通常大于图片高度，导致行盒高度略大于图片本身。额外高度加上非整数padding后，浏览器在上下方向的取整策略可能不一致（比如顶部向上舍入、底部向下舍入），最终表现为上下间距不等。
• 整数像素的精确渲染：当0.2rem换算后为整数像素时，所有布局长度都是精确值，浏览器能均匀分配上下空间，因此间距一致。

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