Question

The markup is here:

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

* {margin: 0; padding:0;}
ul{ border: 1px solid black; height: 100px;width:100%; display:block;} 
li{display:inline-block;width: 200px; height: 100px; background: red;}

you can see the demo in here

My confuse is, I have already set all the margin and padding into zero, why there is still gap here? Until I have to set the float: left to clear the gap

​

Answer 1

Try this html

<ul>
     <li></li><!--
  --><li></li><!--
  --><li></li>
</ul>

working jsfiddle

Also you can find explanation and another solutions in this css-tricks article: Fighting the Space Between Inline Block Elements