图片左右出现多余小间距问题排查（Table与Flex布局场景）

在容器div内用Table布局和Flex布局横向并排放置三张图片时，出现了微小间距：Table布局右侧图片和容器右边界有间隙，Flex布局左右两侧图片和容器边界都有间隙，以下是具体原因分析：

一、Table布局右侧间距原因 #

1. 亚像素渲染偏差：图片宽度用calc(100% / 3 - 40px / 3)计算，当容器宽度无法被3整除时，会得到带小数的像素值，浏览器无法精确渲染亚像素，导致三张图片的总宽度和容器宽度出现细微差值，最终在右侧产生间隙。
2. 盒模型宽度计算：图片设置了border:1px solid，默认盒模型是content-box，border宽度不会被包含在max-width的计算中，实际图片总宽度是「内容宽度 + border宽度」，这会让整体宽度超出预期，容器自动调整后出现右侧间隙。
3. Table布局特性：display:table的容器会根据内容自动调整宽度，当内部table-cell的内容总宽度和容器宽度存在细微偏差时，浏览器会将剩余空间分配到容器边缘，表现为右侧的微小间距。

Table布局代码 #

CSS代码

.multiple-images-parent {
  display: table;
  height: 400px;
  margin: 0 auto;
  border: 1px solid red;
  border-collapse: collapse;
  font-size: 0;
}

.multiple-images4 {
  display: table-cell;
  border: 2px solid black;
  line-height: 0;
  vertical-align: middle;
}

.multiple-images4 img {
  margin-right: 20px;
  border: 1px solid;
  max-width: calc(100% / 3 - 40px / 3);
}

.multiple-images4 img:last-child {
  margin-right: 0;
}

HTML代码

<div class="multiple-images-transform">
  <div class="multiple-images-transform2">
    <img src="test1.jpg">
    <img src="test1.jpg">
    <img src="test1.jpg">
  </div>
</div>

二、Flex布局左右间距原因 #

1. justify-content:center的特性：该属性会让flex容器内的元素整体居中，当三张图片的总宽度（包含margin、border）小于容器宽度时，剩余空间会被平均分配到容器的左右两侧，形成微小间距。
2. 亚像素渲染问题：同样因为calc(100% / 3 - 40px / 3)的计算结果可能是小数像素，浏览器渲染时无法完全匹配容器宽度，导致整体内容宽度略小于容器宽度，触发center对齐的剩余空间分配。
3. 盒模型额外宽度：图片的border未被包含在max-width计算中，实际总宽度超出预期，进一步加剧了内容总宽度和容器宽度的偏差，使得左右间隙更明显。

Flex布局代码 #

CSS代码

.multiple-images-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  border: 2px solid black;
}

.multiple-images-flex img {
  margin-right: 20px;
  max-width: calc(100% / 3 - 40px / 3);
}

.multiple-images-flex img:last-child {
  margin-right: 0;
}

HTML代码

<div class="multiple-images-flex">
  <img src="test1.jpg">
  <img src="test1.jpg">
  <img src="test1.jpg">
</div>

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