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之间为什么不是紧挨着的
在Firefox中，1015px及以上可以一行显示...
但在Chrome中，1024px及以上时才可以做到一行显示；
我完全搞不懂了...通过Head First进行入门，但是回顾了一下，也没有任何关于这种情况的说明
回車換行導致的，解決方案很多，找到根源了，你可以刪除換行，你可以把ul的font-size:0,然後li，寫上你的需要的字號（chrome應該是有最小字號12的問題），還有就是margin設定負值
IE8以上的IE瀏覽器以及FF、chrome等的標準瀏覽器會產生空白bug問題，其中chrome中顯示的是8px的空白bug，但是其他瀏覽器則是4px的空白bug。
方法一：在程式碼中
方法二：透過負向margin解決 margin-right: -4px; *margin-right: 0px；chrome是8px無法解決（ps：我試了一下方法二可以解決chrome。）。 *是ie6或ie7 這是利用ie的解析bug
方法三：設定父元素font-size ：0； 這個不能解決safari ，letter-spacing：-4px;(調整字符間距，將其去掉)這個可以解決safari；二者結合
方法四：丟失結束標籤把
請設定父級元素
font-size:0;
我試了一下
這個margin-right:-8px;
相容於 chrome firefox IE Edge 360
為了保持html結構好看，我常用的做法是在父元素上設定 font-size: 0
你既然使用的是Li,為什麼不去使用float:left.來實現你所要的功能呢。
另外這個並不是未知間隙，但是它的間隙寬度在不同瀏覽器都有不同的寬度，所以不可以透過修改偏移來實現，其實我常用的方法就是前面幾個不要加閉合標籤即可。
例如
在最後一個標籤加上閉合標籤，防止出現問題。
這樣可以完美解決間隙問題。
想問題主那個頁面上測量的工具叫什麼
這是inline-block的空白間隙問題
這些是一些空白字符，看不見，但是會佔據一定的
width等解決方法有很多
某個處理方法 來自 http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements
具體處理方法 你可以看下 w3cplus上的文章 如何解決inline-block元素的空白間距
樓主， 當你吧
块级元素，轉換成行内元素的時候，有沒有想過空格會影響到排版呢？就比如
這3種情況顯示的是一樣？
如果你真看明白我給你的例子， 那你的問題就已經解決了。
結論
這個
未知间隙，就是空格，也就是你的换行符，區塊級元素可以忽略換行符， 但是行內元素不會。inline-block間隔問題