如何用HTML/CSS实现两张图片并排展示且消除多余间距

问题根源 #

间距过大的核心原因如下：

• 你为img设置的width:15%是相对于其父容器（li、.column）的宽度，flex布局默认会让两个.column等分外层.promotion容器的全部宽度，每张图仅占所在.column的15%，自然会在中间留出大量空白
• 冗余的li、.column嵌套结构也可能自带浏览器默认的内外边距，进一步拉大间距
• 额外说明：li元素必须嵌套在ul/ol标签内，直接放在div中不符合HTML语义规范，也可能带来意料之外的默认样式干扰

修复方案 #

方案1：简化冗余结构（推荐）

直接去掉不必要的.column和li嵌套，修改后HTML代码如下：

<div class="promotion">
  <a href="https://github.com/noprojects/noprojects.net">
    <img src="img/github.png" alt="Github">
  </a>
  <a href="https://patreon.com/noprojects">
    <img src="img/patreon.png" alt="Patreon">
  </a>
</div>

对应CSS代码如下，可自行调整间距和图片尺寸：

.promotion {
  display: flex;
  align-items: center; /* 两张图片垂直居中对齐 */
  gap: 12px; /* 直接控制两张图片之间的间距，数值可按需修改 */
  justify-content: flex-start; /* 从容器左侧开始排列，如需整体居中可改为center */
}
.promotion img {
  width: 44px; /* 固定图片宽度，不要用百分比避免随容器缩放变形，数值可按需调整 */
  height: auto;
}

方案2：兼容原有结构

如果需要保留现有的.column和li结构，只需修改CSS即可：

.promotion {
  display: flex;
  align-items: center;
  gap: 12px; /* 控制两个.column之间的间距 */
  justify-content: flex-start;
}
/* 取消column的默认拉伸行为 */
.promotion .column {
  flex: none;
}
/* 把图片宽度改为固定值，不要用百分比 */
.promotion img {
  width: 44px;
  height: auto;
}
/* 清除li的默认内外边距 */
.promotion li {
  list-style: none;
  margin: 0;
  padding: 0;
}

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