移除边缘Div内边距后，如何保持内部16:9响应式图片尺寸适配

嘿，我明白你遇到的问题了——当你去掉左右两个Div的内边距后，它们内部的图片因为可用空间变多而撑大，破坏了整体的一致性对吧？其实核心问题是内边距会影响元素的可用内容宽度，默认的box-sizing: content-box会把内边距加到元素宽度外面，导致左右Div的内容空间比中间的大。

给你一个干净利落的解决方案，用Flex布局结合gap属性来替代Div之间的内边距，这样既能保证间距，又能让所有Div的宽度完全一致：

第一步：全局重置盒模型 #

先设置全局box-sizing，避免内边距撑开元素宽度：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

第二步：用Flex+Gap实现均等布局 #

给你的容器（.hfeed.popular）设置Flex布局，用gap控制Div之间的间距，不用再给每个Div单独加左右内边距：

.hfeed.popular {
  display: flex;
  gap: 20px; /* 这就是Div之间的20px间距 */
}

第三步：处理16:9响应式图片 #

给每个内容Div加个类名（比如.article-item），设置flex: 1让它们平分容器宽度，再用padding-top的技巧实现固定16:9比例的图片容器：

.hfeed.popular .article-item {
  flex: 1; /* 四个Div平分容器宽度 */
}

/* 16:9响应式图片容器 */
.article-item .img-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9/16 = 0.5625，固定比例 */
  overflow: hidden;
}

.article-item .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分，按需换成contain */
}

调整后的HTML结构 #

给每个内容Div加上类名，并用图片容器包裹图片：

<section class="hfeed popular clearfix">
  <div class="article-item">
    <div class="img-wrapper">
      <img src="your-image-src.jpg" alt="图片描述">
    </div>
    <!-- 这里可以添加文章标题等其他内容 -->
  </div>
  <div class="article-item">
    <div class="img-wrapper">
      <img src="your-image-src.jpg" alt="图片描述">
    </div>
  </div>
  <div class="article-item">
    <div class="img-wrapper">
      <img src="your-image-src.jpg" alt="图片描述">
    </div>
  </div>
  <div class="article-item">
    <div class="img-wrapper">
      <img src="your-image-src.jpg" alt="图片描述">
    </div>
  </div>
</section>

为什么这个方案能解决问题？ #

gap是直接在Flex容器中设置的元素间距，不会影响每个Div的自身宽度——四个Div会完全平分容器的可用宽度（减去3个20px的gap总宽度），所以它们的内容空间完全一致，图片自然不会出现大小不一的情况。同时，用padding-top实现的16:9容器，无论屏幕尺寸怎么变化，图片都会保持正确的比例。

如果因为某些限制必须用内边距而不是gap，可以给所有Div设置padding: 0 20px，再给第一个Div加padding-left: 0、最后一个加padding-right: 0，同时给每个Div设置width: calc(25% - 15px)（15px是3个20px间距平均到4个Div的数值），这样每个Div的总宽度（含内边距）会保持一致，内容空间也相同。不过这种方法不如Flex+Gap简洁，优先推荐前者。

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