通过 CSS 的 gap 属性可精准控制 Flex 容器内图片间的间距，替代默认的 justify-content: space-between 所导致的过度拉伸问题。
通过 css 的 `gap` 属性可精准控制 flex 容器内图片间的间距，替代默认的 `justify-content: space-between` 所导致的过度拉伸问题。
在您提供的 HTML 代码中，所有图片组均使用了如下结构：
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
<img src="V%C4%93sture01.jpg" ...><img src="V%C4%93sture02.jpg" ...>
</div>
其中 justify-content: space-between 会将首尾元素分别“钉”在容器左右边缘，中间留出尽可能大的空白——这正是图片看起来“离得太远”的根本原因。调整 width 只改变图片自身尺寸，并不改变它们之间的逻辑间距。
✅ 正确解法：用 gap 替代 space-between
只需移除 justify-content: space-between，改用 gap（推荐 gap: 16px 或根据设计微调），并搭配 justify-content: center 保持居中对齐：
<div style="display: flex; justify-content: center; gap: 16px; margin-bottom: 20px;">
<img src="V%C4%93sture01.jpg" alt="Melngalvju nams (pa kreisi) krievu sabombardētajā Rātslaukumā 1710. gada jūlijā" style="max-width:90%"><img src="V%C4%93sture02.jpg" alt="Rīgas Melngalvju nams (labajā pusē) pēc sagraušanas 1941. gadā" style="max-width:90%">
</div>
? 小贴士：
-
gap是现代浏览器广泛支持的标准属性（Chrome 84+、Firefox 63+、Safari 14.1+），无需前缀； - 若需兼容极旧浏览器（如 IE），可改用
margin-right+:last-child { margin-right: 0 }，但推荐优先使用gap； - 避免混合使用
justify-content: space-between和gap——二者语义冲突，gap会被忽略。
? 进阶建议：为统一维护，可将图片容器抽象为 CSS 类：
.image-pair {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
}
然后在 HTML 中简洁调用：
<div class="image-pair"> <img src="V%C4%93sture01.jpg" ...><img src="V%C4%93sture02.jpg" ...> </div>
这样既提升可读性，也便于全局调整间距——只需修改一处 CSS 即可同步所有图片组间距。
