文本上奇怪的垂直空间答案

【问题标题】：Strange vertical space on text文本上奇怪的垂直空间
【发布时间】：2010-09-27 13:19:09
【问题描述】：

我遇到了一些 @font-face 文本的奇怪问题，其中包含一些奇怪的填充（或至少是垂直空间）。它引起了问题，因为我想以某种方式定位文本，但不能让它与其他东西重叠。这是正在发生的事情的图片：

正如您在选择文本时看到的那样，文本与其上方的一些导航栏重叠。我尝试过调整行高和填充、边距，以及我能想到的任何东西。这是相关的CSS，有没有人建议我如何让行的高度接近实际文本的高度。

  *{ margin: 0; padding: 0; }
  h1#logo { font: 350px/.95 'Bebas Neue'; color: #DDD; text-align: center; margin: 1px 0; }

编辑：这里是问题的一个活生生的例子：http://codezroz.com/stuff/hello.html

【问题讨论】：

不确定实际问题是什么，但请记住，您始终可以使用负边距/填充作为快速解决方案。我总是使用top: -10px 使内容与屏幕顶部齐平。有点hacky，但它有效。

【解决方案1】：

以前从未见过/.95 语法，但经过几次测试后，我相信它的工作原理如下：
line-height = 0.95 * font-size = 332.5
所以我认为这是你的问题，字体比线条高
在H1上添加overflow: hidden;就足够了

【讨论】：

该语法是 font 速记属性的正确语法。用法是font-size/line-height。没有单位的数字被视为百分比，因此您的结论是正确的，尽管您现在的答案与我的基本相同；）

【解决方案2】：

好吧，将overflow: hidden 应用到h1#logo 可以阻止选择突出显示渗入元素之外的区域。

还请记住，您可以使用:selection 伪元素来更改所选文本的颜色。

【讨论】：