※ 引述《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也已经被确认是个不太好的方式了
也可能有使用者自己调整浏览器、作业系统字体尺寸的情形(老人家眼睛看不清楚)
最好还是依照流动版面的概念，字真的又大又多就允许换行会是比较万用的解法