html - 为什么左边有空间？

Question

<ul style="background: blue; list-style: none; width: 40px; height: 40px; color: white">
  <li style="float: left; width: 20px; background: red">a</li>
  <li style="float: left; width: 20px; background: green; height: 40px">b</li>
</ul>

那一点 HTML / CSS 似乎产生了一个 80px 宽的 ul，而不是 40px 宽。我不确定为什么。有任何想法吗？这是小提琴：

http://jsfiddle.net/qJvmM/

谢谢！

Answer 1

因为ul默认情况下通常有一个填充。

您需要将其重置为零：

ul {
  padding: 0;
}

Answer 2

那是因为 ul 的默认边距和填充

<ul style="background: blue; list-style: none; width: 40px; height: 40px; color: white;margin:0; padding:0">
  <li style="float: left; width: 20px; background: red">a</li>
  <li style="float: left; width: 20px; background: green; height: 40px">b</li>
</ul>

演示