如何实现多图片边框合并及图片完全填充div？

Hey there! Let's break down your two layout issues with clear, actionable solutions—no fancy jargon, just straightforward CSS fixes.

问题1：合并多张图片的边框（消除间距导致的边框分离） #

The root cause here is usually two things: whitespace between inline/inline-block images (which creates gaps) and duplicate borders between adjacent images. Here are two solid fixes:

方案A：Flex布局（推荐，最简单） #

Flexbox automatically removes whitespace between child elements, so it's perfect for this. We'll add a single outer border to the container, then add dividers between images without doubling up:

/* 父容器 */
.image-row {
  display: flex;
  border: 1px solid #333; /* 整体的外边框 */
}

/* 每张图片 */
.image-row img {
  flex: 1; /* 让图片平分容器宽度 */
  border-right: 1px solid #333; /* 给每张图加右边框当分隔线 */
}

/* 去掉最后一张图的右边框，避免和容器外边框重复 */
.image-row img:last-child {
  border-right: none;
}

方案B：Inline-block（如果不能用Flex） #

If you need to support super old browsers, you can fix the whitespace and adjust borders manually:

.image-row {
  font-size: 0; /* 消除inline-block元素间的空白 */
  border: 1px solid #333;
}

.image-row img {
  display: inline-block;
  width: 25%; /* 4张图各占25% */
  font-size: 16px; /* 恢复正常字体大小（如果图片有文字，可选） */
  border-right: 1px solid #333;
}

.image-row img:last-child {
  border-right: none;
}

问题2：让4张图片完全填充div的左右两侧 #

This is all about making sure the total width of your images equals the width of the parent div, with no extra padding/margin pushing them inward. Again, Flex or Grid are your best bets:

方案A：Flex布局 #

Flex will automatically stretch the images to fill the container's width, no math required:

.image-container {
  display: flex;
  /* 去掉默认的padding/margin，确保没有额外留白 */
  padding: 0;
  margin: 0;
}

.image-container img {
  flex: 1; /* 每张图平分容器宽度 */
  width: 0; /* 修复某些浏览器下flex:1不生效的问题 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形（可选，根据需求调整） */
}

方案B：Grid布局 #

Grid is even more explicit for equal-width columns:

.image-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列，每列宽度相等 */
  gap: 0; /* 去掉列之间的间距 */
  padding: 0;
  margin: 0;
}

.image-container img {
  width: 100%; /* 图片填满网格单元格 */
  object-fit: cover; /* 可选，保持图片比例 */
}

关键注意事项： #

• Double-check that your images don't have any default margin or padding (most browsers don't add this, but it never hurts to confirm).
• Use object-fit: cover if you want to crop images to fit without stretching, or object-fit: contain if you prefer to show the entire image (though that might leave empty space, which isn't what you asked for here).

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