为何设置ul的padding:0可消除列表缩进，margin:0却无效？

浏览器给ul标签自带了默认样式，其中列表的缩进是靠左内边距（padding-left）实现的，而非外边距（margin）。拿Chrome浏览器举例，ul的默认样式大致是这样：

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

你设置list-style-type: none只是去掉了项目符号，但padding-inline-start:40px（也就是左内边距）还留着，所以依然会有缩进空白。

你之前试的margin:0，只能清除ul上下的默认外边距（margin-block-start和margin-block-end），对左右的缩进根本没影响，自然没用。而设置padding:0（或者单独写padding-left:0），直接清空了ul的左内边距，缩进空白也就消失了。

一句话总结：ul的默认缩进是内部padding撑出来的，不是外部margin，所以得调padding才能解决问题。

示例代码 #

CSS

ul {
  list-style-type: none;
  padding: 0px;
}

HTML

<ul>
  <li>
    Linkedin
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Coca Coffee