我對以下的文字 透過CSS設定字型：
<li><a href="#">待</a></li>
li a{
display:block;
padding:17px;
text-decoration:none;
font:20px arial;
color:black;
}
所以我原本認為 li元素的高度寬度 都應該是17*2+20=54
然而我開啟開發者模式 看到的是以下這樣：

高度是58
請問為什麼高度不是預期的54 而是58 多出來的4px 是哪來的？

f12不是有個區塊會顯示整體 padding margin border. .從那邊看吧

應該是行高的問題，每個瀏覽器都會預設給1.0-1.2不等的line height，顯示的方塊有包含行高。試試看設line-height:1不過這樣設可能還是會差1px左右，這問題可以參考這篇 https://goo.gl/wNzV9N