假设我有一个定义为内联 block 的 span
元素。它的唯一内容是纯文本。当字体非常大时,您可以清楚地看到浏览器如何在文本上方和下方添加一点填充。
HTML:
CSS:
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
<span>BIG TEXT</span>
看看盒子模型,很明显浏览器正在添加填充内容边缘。我需要删除这个“填充”,一种方法是简单地改变行高,如:
这在 Chrome 中效果很好,但在 Firefox 中,文本向顶部移动(FF17、Chrome 23、Mac OSX)。
有跨浏览器解决方案的想法吗?谢谢!
最佳答案
看起来好像您需要显式设置字体,并根据需要更改 line-height
和 height
。假设“Times New Roman”是您浏览器的默认字体:
span {
display: inline-block;
font-size: 50px;
background-color: green;
/*new:*/
font-family: 'Times New Roman';
line-height: 34px;
height: 35px;
}
<span>
BIG TEXT
</span>
关于html - 删除内联 block 元素中大文本上方和下方的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46162657/