我不明白为什么span元素的高度大于它的字体大小（边距和填充= 0）：JSFiddle example
<head>
<style>
.analized-element {
font-size: 20px;
font-family: "Lucida Console", "Lucida Grande", monospace;
}
</style>
</head>
<body>
<span class="analized-element">Test message</span>
</body>此问题仅存在于Mac中：
== analized-element =====
border-size: 0 0 0 0
padding: 0 0 0 0
font-size: 20px
offsetHeight: 23px
=========================我们如何看到有3个额外的像素。同样的例子在Windows：
== analized-element =====
border-size: 0 0 0 0
padding: 0 0 0 0
font-size: 20px
offsetHeight: 20px
=========================span的高度等于其字体大小。
2条答案
按热度按时间waxmsbnn1#
rsaldnfx2#
我认为您可以为
.analized-element元素添加line-height: 20px和display: inline-block来解决此问题。或者
line-height: 1和font-size: 20px作为主体元素。