css滑块，删除不需要的空格？

Question

我正在学习CSS3并试图创建一个纯CSS滑块， 到目前为止，它工作得很好，我现在在我的滑块中有一个不需要的填充（边距？）。

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

我该怎么办？怎么解决？

但最重要的是，这个空间来自哪里？  （这样我完全理解如何自己修改它）

slider with unwanted space

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元素具有默认样式 请重置样式。

figure {
  margin: 0
}