删除边缘 div 填充，但保持此 div 内的图像大小并取决于此 div 大小答案

【问题标题】：remove edge div padding, but keep size of the images inside this div and depend of this div size删除边缘 div 填充，但保持此 div 内的图像大小并取决于此 div 大小
【发布时间】：2018-04-22 15:51:28
【问题描述】：

我有四个 div 排成一行。在这个 div 中，我有响应式和 16:9 的图像。 div 之间的填充应为 20px，但边缘填充（左图为左，右图为右）应为 0。不幸的是，然后我减去左图的左边距和右图的右边距，这两个图像更大。我知道为什么，但是我很难找到好方法，如何防止这种情况。

html:

<section class="hfeed popular clearfix">
  <div id="article-list-title">
    <h3>Popular posts</h3>
  </div>
  <article class="category-popular">
    <div id='summary-img'>
      <a href=" " title=" ">
        <img src=" " />
      </a>
    </div>
    <!---- text part, not importent here --->
  </article>
  <article class="category-popular">
    <div id='summary-img'>
      <a href=" " title=" ">
        <img src=" " />
      </a>
    </div>
    <!---- text part, not importent here --->
  </article>    
  <article class="category-popular">
    <div id='summary-img'>
      <a href=" " title=" ">
        <img src=" " />
      </a>
   </div>
   <!---- text part, not importent here --->
 </article>                     
 <article class="category-popular">
    <div id='summary-img'>
      <a href=" " title=" ">
        <img src=" " />
      </a>
    </div>
    <!---- text part, not importent here --->
  </article>                    
</section>

css:

article.category-popular {
    width: 25%;
    padding: 0 10px;
    box-sizing: border-box;
}

article {
    float: left;
    position: relative;
}

article #summary-img {
    width: 100%;
    overflow: hidden;
    margin: 0 0 20px 0;
    padding-top: 56.25%;
    position: relative;
}

article #summary-img a {
    width: 100%;
}

article #summary-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100% !important;
    height: auto !important;
    transform: translate(-50%, -50%);
}

article.category-popular #summary-img img {
    min-height: 200px !important;
}

请给我一些建议，如何解决这个问题。

【问题讨论】：

标签： html responsive-design

【解决方案1】：

好的，我找到了答案。我对适当的 div 使用左/右减去适当的值：

.popular article.category-popular:nth-child(2){
  left: -10px !important;
 }

.popular article.category-popular:nth-child(3){
  left: -5px;
}

.popular article.category-popular:nth-child(4){
  right: -5px !important;
 }

.popular article.category-popular:last-child{
  right: -10px !important;
 }

您可以关闭主题。

【讨论】：