如何使用 HTML/CSS 删除边框和列表之间的空格？答案

【问题标题】：How to remove space between border and list with HTML/CSS?如何使用 HTML/CSS 删除边框和列表之间的空格？
【发布时间】：2015-09-16 19:48:21
【问题描述】：

我想删除边框左侧和无序列表之间的空格。

在右侧，列表和边框之间几乎没有任何空间；这也是我希望它在左侧的方式。

ul {
  display: inline-block;
  border: 5px solid red;
  padding: 1px;
}

<ul>
  <li>Kilimanjaro</li>
  <li>Table Mountain</li>
  <li>Matterhorn</li>
  <li>Denali</li>
  <li>Cerro Torre</li>
</ul>

【问题讨论】：

向我们展示您的 HTML 并制作可执行代码 sn-p。
- 乞力马扎罗山
- 桌山
- 马特宏峰
- 德纳利
- 托雷山
在 css 中试试这个。 ul {列表样式：无；填充左：0； }
Ived 尝试了 padding-left ，但它仍然不会删除那个空格 :///
你也用过这个 list-style:none 吗？

标签： html css border space

【解决方案1】：

您还必须为li 设置填充。

li{
  padding:0.125em;
}

【讨论】：

嗯仍然无法正常工作，你能告诉我你的意思吗？
让它变大了：/

【解决方案2】：

我认为这是 -webkit-padding-start 属性。在 Chrome 中默认设置为 40px：

你可以删除它，然后添加你想要的填充：

ul {
  display: inline-block;
  border: 5px solid red;
  padding: 1px;
  -webkit-padding-start: 0px;
     -moz-padding-start: 0px;
          padding-start: 0px;
}

查看JSFiddle

【讨论】：

啊，我明白了，谢谢，但如果我想编辑
标签并使其变大，那么它似乎不起作用