Html CSS-想删除一个空白，但不知道如何摆脱它？

这是我的代码，我不明白为什么第一个空格会出现在页面的左侧

CSS

.header-left ol{
    width: auto;
    float: left;
    display: block;
    background-color: #6899D3;      
}

.header-left li{
    list-style:none;
float:left;
}

.header-left a {
    color:#000;
    display:block;
    height: 50px;
    text-align:center;
    vertical-align:middle;
    text-decoration:none;               
    min-width: 100px;
    overflow: auto;
    border-radius: 20px;
}

.header-left a:hover {
    color:#000000;
    text-decoration:none;
}

#nav1 a:hover { background-color: #FF5B0D; }    

#nav2  a:hover {    background-color:#00FF40;}

#nav3  a:hover {    background-color:#FF0080;}

#nav4  a:hover {    background-color:#00CCFF;}

#nav5  a:hover { background-color: #FFFF00; }

HTML

<div class="header-left">
  <ol>
    <li id="nav1"><a href="http://www.google.com">a</a></li>
    <li id="nav2"><a href="http://www.google.com">b</a></li>
    <li id="nav3"><a href="http://www.google.com">c</a></li>
    <li id="nav4"><a href="http://www.google.com">d</a></li> 
    <li id="nav5"><a href="http://www.google.com">e</a></li>
  </ol>
</div>

您需要重置

正文

和

ol

的自然

填充

和

边距

。设置：

body{
    margin: 0;
    padding: 0;
}

.header-left ol{
    width: auto;
    float: left;
    display: block;
    background-color: #6899D3;        
    margin: 0; //RESET DEFAULT
    padding: 0; // RESET DEFAULT
}

---

您需要重置

正文

和

ol的自然
填充
和
边距
。设置：

body{
    margin: 0;
    padding: 0;
}

.header-left ol{
    width: auto;
    float: left;
    display: block;
    background-color: #6899D3;        
    margin: 0; //RESET DEFAULT
    padding: 0; // RESET DEFAULT
}

添加
左填充：0到您的
。标题左ol
规则

.header-left ol {
    width: auto;
    float: left;
    display: block;
    background-color: #6899D3;
    padding-left:0;
}

添加
左侧填充：0到您的
。标题左ol
规则

.header-left ol {
    width: auto;
    float: left;
    display: block;
    background-color: #6899D3;
    padding-left:0;
}

这样做的原因是因为您使用的是默认情况下带有左填充的
。即使您将list type设置为：none，您也无法摆脱左侧填充。相反，在ol代码块集中
padding:0
或
左填充：0
如下所示：

.header-left ol{
  width: auto;
  float: left;
  display: block;
  background-color: #6899D3;
  padding-left:0;
}

这应该可以解决您的问题。
这样做的原因是您使用的是默认情况下带有左填充的
。即使您将list type设置为：none，您也无法摆脱左侧填充。相反，在ol代码块集中
padding:0
或
左填充：0
如下所示：

.header-left ol{
  width: auto;
  float: left;
  display: block;
  background-color: #6899D3;
  padding-left:0;
}

这应该可以解决你的问题。
在你的页边空白处，试着放一些类似这样的东西，因为这样会把它向上拉，把底部向上拉

这是要放在你的样式CSS表

margin: -30px 0px -30px 0px;

在你的边距里，试着放一些像这样的东西，因为这会把它向上拉，把底部向上拉

这是要放在你的样式CSS表

margin: -30px 0px -30px 0px;

右键单击任何列表条目并选择“检查”（这至少在Firefox中可用），然后检查框模型中的任何边距/边框/填充，找出它们的位置，然后通过CSS删除它们。或者只需添加一个全局
*{padding:0；margin:0；border:0；}
。右键单击任何列表条目并选择“检查”（至少在Firefox中可用），然后选中框模型中的任何边距/边框/填充，找出它们的位置，然后通过CSS将其删除。或者简单地添加一个全局
*{padding:0；margin:0；border:0；}
。由于
body
@ajp15243-true上的用户代理
margin
样式，这仍然会在蓝色
ol
框的左侧和页面的左边缘之间留下一个间隙（至少在Chrome中），然而，我阅读问题OP的方式关注的是第一项旁边的大间隙，而不是列表旁边的额外空间。啊，显然我是瞎子，当我第一次将代码插入JSFIDLE时没有注意到。这仍然在蓝色
ol
框的左侧和页面的左边缘之间留有间隙（至少是铬合金），由于用户代理
margin
在
body
@ajp15243上的样式-是的，但是我阅读问题的方式OP关注的是第一项旁边的大间隙，而不是列表旁边的额外空间。啊，显然我是瞎子，当我第一次将代码插入JSFIDLE时没有注意到。@user3155620这有点过分了，唯一需要设置为
0
的是
ol
上的
左侧填充
，如j08691和Samleo的回答中所示。@ajp15243重置正文上的填充和边距是一个很好的做法。如果使用像normalize.css这样的文件，它将为您做，并重置应用于
h1等元素的默认值
，
ol
，等等@jmore009重置
主体
，我在大多数情况下都能看到，但是所有其他元素我都会犹豫，不想做出一个笼统的声明，重置一切总是好的。这取决于你的应用程序。精确定位一切可能不是一个必要的目标，因此即使是用户代理样式表也可能无关紧要，拥有它们实际上可能会节省大量的额外工作，即在所有有意义的东西上加上
边距
/
填充
。我想是个人偏好，但我不认为这是过分的。我喜欢控制填充和边距，这样可以使它更为合理e一致通过browsers@user3155620这有点过分了，唯一需要设置为
0
的是
在
ol
上向左填充
，如j08691和Samleo的回答中所示。@ajp15243重置正文上的填充和边距是一个很好的做法。如果您使用像normalize.css这样的文件，它会为您做到这一点以及重置应用于元素的默认值，如
h1
，
ol
，等等@jmore009重置
主体
，我在大多数情况下都可以看到，但是所有其他元素我都会犹豫是否要做出一个笼统的声明，即重置一切总是好的。这取决于您的应用程序。所有内容的准确定位这可能不是一个必要的目标，因此用户代理样式表之间的值稍有不同可能无关紧要，拥有它们实际上可能会节省大量的额外工作，即在所有有意义的东西上添加
边距
/
填充
。我想这是个人偏好，但我不会说这太过分。我喜欢通过对填充和边距的有效控制，可以使其在不同浏览器之间更加一致