爲什麼左側有空格？

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寬 - 而不是40px寬。我不知道爲什麼。有任何想法嗎？這裏的小提琴：

http://jsfiddle.net/qJvmM/

謝謝！

Answer 1

因爲ul默認情況下通常具有填充。

你需要將它重置爲零：

ul { 
    padding: 0; 
} 

Answer 2

這是因爲UL的默認margin和padding的

<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> 

DEMO

Answer 3

這裏的風格應該如何be

<ul style="float:left; display:inline; background: blue; list-style: none; width: 40px; height: 40px; color: white; padding:0; margin:0;"> 

總是做出習慣中使用CSS復位，你可以看看這裏參考： http://newtowebdesign.blogspot.in/2011/09/tips-on-cross-browser-css.html