[問題] 請問如何解決li和ol左側之間的留白?

[banana2014 (香蕉共和國)]

以下是把<li> inline之後的結果，左側(項目A外的紅框和綠框之間)還是有留白的現象，請
問該如何消除?

<style>
.table {display: table; margin: 0 auto;}
ol.links {list-style-type: none; border: 1px solid #0f0;}
li.link {display: inline-block; font-size: 16px; border: 1px solid #f00;}
</style>
<div class="table">
        <ol class="links">
                <li class="link">項目A</li>
                <li class="link">項目B</li>
                <li class="link">項目C</li>
                <li class="link">項目D</li>
                <li class="link">項目E</li>
        </ol>
</div>

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 120.109.151.203
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1452163620.A.E97.html
推 Canboo: 請css reset,你這少把padding歸零
推 Hevak: 就padding不等於0，拿網頁開發者工具指上去元素應該就看得
→ Hevak: 出來
推 banjames: ul或ol的padding設為0; 手刻個幾次就會明白了
推 sjlxup6: 我想原PO應該還沒解決，這是inline-block的bug
→ sjlxup6: 相鄰同層的inline-block元素 會在瀏覽器產生4px的空白
→ sjlxup6: 這是webkit碰到inline-block後的斷行字元產生的溢位
→ sjlxup6: 可以估狗搜尋inline block space 有很多解法
→ sjlxup6: 一般的reset套件或framework都會事先處理好
推 sjlxup6: 最簡單的解法就是把所有li放在同一行...
推 Hevak: 或者要放在不同行的話就把closing的那個>斷到下一行去
→ Hevak: 像是：
→ Hevak: <li class="link">項目A</li
→ Hevak: ><li class="link">項目B</li>