CSS Line Heights关闭

Question

我有一个带有一些文字的<a>。我在a上设置了字体大小和行高，但是文字突出了a的底部。

如何解决这个问题？

标记：

<a href="#" class="prev-link>Previous photo</a>

样式：

.prev-link {
  display: inline-block;
  margin: 0;
  border-width: 0;
  font-size: 18px;
  line-height: 1em;
  color: red;
  background-color: #102c3b;
}

有什么想法吗？

此图显示了当我将行高设置为正常时会发生什么。它适合文本，但留下了最大差距？

Answer 1

你应该改变

line-height: 1em;

到

line-height: 1.5em;

如果将line-height设置为1 em并且字体大小为18px，则表示1 em = 18px，因此line-height将与font-size相同。

Answer 2

例如，您可以添加

<a href="#" class="prev-link><span>Previous photo</span></a>

.prev-link span {
 margin-bottom:10px;
 }
.prev-link { 
display: inline-block;
margin: 0;
border-width: 0;
font-size: 18px;
line-height: 1em;
color: red;
background-color: #102c3b;
} 

Answer 3

line-height:normal;

应将文本的行高重置为默认值，忽略您可能拥有的全局重置css。虽然使用它，但可能导致实际的行高取决于用户代理。

在定义排版时，您应该尝试坚持使用px或em。 IE浏览器。你有：

font-size: 18px;
line-height: 1em;

这可能会导致您描述的问题。

关于字体的一个有趣的事情是，基线不是你在视觉上预期的那样。

您的情况看起来像是在上升和基线附近计算行高。

见这里：http://www.myfirstfont.com/glossary.html