想要在响应式网页中的图像之间留有空白？ [复制]

Question

这是我正在处理的屏幕截图：

现在的问题是，我希望图像之间有一些空白，因此它们有点间隔，我尝试将style="margin-right:25px" 添加到前三张图像中，但是如果我这样做，它们会变得稍微大一些，并且最后一张图片很小：

我当前的这个页面的 HTML 是

<div id="footer">
    <div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
    <div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
    <div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
    <div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
</div>

CSS 是

#footer {
  display: table;
  width: 100%;
  max-width: 1024px;
  margin-top: 1%;
}

.lower {
  display: table-cell;
}

#footer img {
  width: 100%;
  height: auto;
  max-width: 256px;
}

请记住，这是一个响应式网页，不是静态的。

谢谢

Answer 1

试试：

.lower {
  width: 25%;
  float: left;
  padding-right: 25px;
}
.lower:last-child {
  padding-right: 0;
}