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

Question

我有四个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;
}

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

Answer 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;
 }

您可以关闭主题。