CSS 行高被关闭

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;

如果您将行高设置为 1 em 并且字体大小为 18px，这意味着 1 em = 18px 因此行高将与字体大小相同。