※ 引述《lueichun (no anonymous)》之銘言：
: 我對以下的文字 透過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
: 然而我開啟開發者模式 看到的是以下這樣：
: https://imgur.com/RAGxZb3
: 高度是58
: 請問為什麼高度不是預期的54 而是58 多出來的4px 是哪來的？
這篇問題很有趣，所以我做了一個簡單的實驗
先說結論：
字體大小(font-size: OO px)，不等於顯示尺寸
https://codepen.io/not0000/pen/bLEmPd
在這篇實驗中，我放了兩種不同的字體，以及中文和英文兩種合計4個字
每個字都用span包起來，並且利用js取得該文字的寬度和高度，顯示在最下方
結果很清楚的顯示，不同字體，英文字的寬可以差到8px，中文字寬卻相同
會有這麼明顯的差異是因為我故意找了兩個寬度差很多的字體
我一下子找不到高差很多的字體，如果找到的話可以讓高度差距更明顯
想要拿一個"字"的寬高來計算也不是很好
因為大小寫、空白字元或符號等寬高都可能不一樣
如果想自己實驗，可以在這邊找到不同字體，扔上去玩看看
https://zh.wikipedia.org/wiki/Font_family_(HTML)
根據以上結果，若想要針對版面的尺寸計算，請不要直接把font-size當作計算基準
另外，font-size還有em、rem等屬性，字體使用px也已經被確認是個不太好的方式了
也可能有使用者自己調整瀏覽器、作業系統字體尺寸的情形(老人家眼睛看不清楚)
最好還是依照流動版面的概念，字真的又大又多就允許換行會是比較萬用的解法