删除inline-block元素中大文本上方和下方的空白区域

问题描述：

假设我有一个定义为内联块的 span 元素。它只是内容是纯文本。当字体大小非常大时，您可以清楚地看到浏览器在文本上方和下方添加了一些填充。

Say I have a single span element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.

HTML：

<span>BIG TEXT</span>

CSS：

span {
    display: inline-block;
    font-size: 50px;
    background-color: green;
}

现场演示：http://jsfiddle.net/7vNpJ/

查看框模型，很明显浏览器正在添加填充内容边缘内。我需要删除这个padding，一种方法是简单地改变行高，如：

Looking at the box model, it's clear the browser is adding padding inside the content edge. I need to remove this "padding", one way is to simply alter the line-height, as with:

http://jsfiddle.net/7vNpJ/1/

这在Chrome中很有用，但在Firefox中，文字正在移动向顶部（FF17，Chrome 23，Mac OSX）。

This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).

任何跨浏览器解决方案的想法？谢谢！

Any idea of a cross-browser solution? Thanks!

答

看起来好像需要显式设置字体，并更改 height 和 height 。假设Times New Roman是您的浏览器的默认字体：

It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:

span {
    display: inline-block;
    font-size: 50px;
    background-color: green;
    /*new:*/
    font-family: 'Times New Roman';
    line-height: 34px;
    height: 35px;
}

测试：http://jsfiddle.net/7vNpJ/21/

删除inline-block元素中大文本上方和下方的空白区域

相关推荐