html5 - li元素inline-block横向排列，出现了未知间隙

Question

Code

<header>
        <ul>
            <li><a href="">我的首页</a></li>
            <li><a href="">GitHub</a></li>
            <li><a href="">about me</a></li>
            <li><a href="">所有内容</a></li>
            </ul>
    </header>

---

body,ul,h1{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a {
    text-decoration: none;    
} 
header {
    width: 1000px;
}
li {
    padding: 25px;
    text-align: center;
    display: inline-block;
    width: 200px;
}

---

通过上面的代码，我想将四个li元素横向排列，

li width：200px（200*4=800px）;
左右padding为25px（25*8=200px）;
总和1000px；但是实际却超过了1000px。

第一个li是正常的

第二个li开始出现偏移，但预设border，margin都为0；

搞不清楚为什么两个li之间为什么不是紧挨着的

之后我开始凑数，想找出这个间隙的大小，结果发现：

在Firefox中，1015px及以上可以一行显示...
但在Chrome中，1024px及以上时才可以做到一行显示；
我完全搞不懂了...通过Head First进行入门，但是回顾了一下，也没有任何关于这种情况的说明

Chrome（1015px）：

---

Firefox（1015px）：

---

Chrome（1024px）：

---

纠结中...寻求大神指导几句，这个间隙到底是什么东西

Answer 1

这个原因是因为li元素的换行引起的，你可以把所有的li写成一行： <li>1</li><li>1</li><li>1</li> ，一定不要换行。

或者用注释符号链接：

<li>1</li><!--
--><li>1</li><!--
--><li>1</li>

或者用 html 5 不闭合的写法：

<li>1
<li>1
<li>1

还有个解决方案就是设置 父级元素的字体大小 font-size: 0px;

Answer 2

所以一般的菜单布局尽量不用inline-block，而是用float:left来实现。

Answer 3

你把父级的字体设置成0就没有间隙了！

Answer 4

楼上都是正确的，还有一种解决方法就是margin取负值。没记错的话是取-4px

Answer 5

@xiadd Opera是个坑哈哈，4px不符合

Answer 6

楼上方法视乎都对，最简单办法是不换行