如何在 CSS 图像幻灯片中的图像之间添加空格？

Question

编辑：

进展顺利...通过更新以下代码，我几乎完全得到了我想要实现的目标，但我不明白为什么它几乎可以工作。过渡时两边间距，过渡后间距隐藏，但有少量图像剪辑：https://codepen.io/anon/pen/LWqPJB

body { 
     margin: -6%; 
} 
div#slider { 
     overflow: hidden; 
}
div#slider figure img { 
     width: 18%; 
     float: left; 
     padding-left: 1%; 
     padding-right: 1%;
}

虽然这不是一个完美的解决方案，但似乎可以完成这项工作的第二种选择是：

div#slider {
    margin-left: -6%;
    margin-right: -6%;
    overflow: hidden;
}
div#slider figure img {
    width: 18%; 
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}

---

问题

我正在仅使用 HTML 和 CSS 在网页中实现简单的图像幻灯片。我开始的代码在下面和https://codepen.io/anon/pen/wJRVwP

目前每张幻灯片都跟在下一张之后，图片之间没有空格（图片 1）。但是，我试图在每个图像之间添加一个 100 像素的空间，该空间仅在过渡期间可见。所以试图添加一个空白，我更改了下面的 CSS 代码；

来自：

div#slider figure img { width: 20%; float: left;}

（演示 1： https://codepen.io/anon/pen/wJRVwP）

到：

div#slider figure img { width: 20%; float: left; padding-left: 100px;}

（演示 2： https://codepen.io/anon/pen/vxvoNy）

更改代码的结果在所有图像之间增加了 100px 的空间，但是，代码更改引入了一个新问题——图像不再对齐并且在每次幻灯片更改后逐渐变差（图 2)。

问题

如何实现图像之间的空间并解决此问题？在代码中，如何 我可以更改 CSS 代码以在每个图像之间添加 100px 的空间，和保持 过渡期间和之后的所有图像都对齐了吗？

---

图片

1. 过渡期间的演示 1。

1. 过渡后的演示 1。

1. 需要的结果。

---

代码

https://codepen.io/anon/pen/wJRVwP

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite;
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
    <img src="ankor-wat.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
  </figure>
</div>

Answer 1

将box-sizing:border-box 属性应用于所有img。左右添加填充（如果不填充两边看起来有点奇怪）。

这些是 CSS 调整

div#slider figure img { 
    width: 20%; 
    float: left; 
    padding-right: 50px;
    padding-left: 50px;
    box-sizing:border-box
}

下面的片段

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}

div#slider {
  overflow: hidden;
}

div#slider figure img {
  width: 20%;
  float: left;
  padding-right: 50px;
  padding-left: 50px;
  box-sizing: border-box
}

div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite;
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
    <img src="ankor-wat.jpg" alt>
    <img src="austin-fireworks.jpg" alt>
  </figure>
</div>

Answer 2

Change the CSS like below:
@keyframes slidy {
    0% { left: 0%;}
    20% { left: 0%; }
    25% { left: -100%;}
    45% { left: -100%; }
    50% { left: -200%; margin-left: 100px;}
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; margin-left: 0px;}
}

Answer 3

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="austin-fireworks.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
<style>
    @keyframes slidy {
        0% { left: 0%; }
        20% { left: 0%; }
        25% { left: -100%;}
        45% { left: -100%; }
        50% { left: -200%; }
        70% { left: -200%; }
        75% { left: -300%; }
        95% { left: -300%; }
        100% { left: -400%;}
    }
    body { margin: 0; } 
    div#slider { overflow: hidden;}
    div#slider figure img { 
        width: 19%; float: left;margin-left:0.5%;margin-right:0.5%;
    }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0px;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 20s slidy infinite; 

    }

</style>