CSS滑块，删除不需要的空间

Question

我正在学习CSS3并尝试创建一个纯CSS滑块，到目前为止，它的运作良好，我现在在我的滑块。

我已经通过更改边缘修复了它，但仍然不明白为什么有这个空间。

我该怎么办？如何解决这个问题？

，但最重要的是，此空间来自何处？ (以便我完全了解如何自己修改(

带有不需要空间的滑块

ex2

这是HTML零件

<div class="slider">
  <figure>
    <img src="hanoi.svg" alt="hanoi"height=450px width=1500px>
    <img src="saigon.jpg" alt="saigon" height=450px width=1500px>
    <img src="danang.jpg" alt="danang" height=450px width=1500px>
  </figure>
</div> 

那就是CSS

.slider{
width: 1500px;
overflow: hidden;
margin-left:125px;
border: 5px solid #777773;
}
.slider figure{
width: 4500px;
height: 415px;
position: relative;
animation: 20s sliding infinite;
}
figure > img{
float:left;
}
@keyframes sliding{
0%{
  left:0px;
}
20%{
  left:0px;
}
40%{
  left:-1500px;
}
60%{
  left:-1500px;
}
80%{
  left:-3000px;
}
100%{
  left:-3000px;
}
}

预先感谢！

Answer 1

图元素具有默认样式。
请重置样式。

figure {
  margin: 0
}