html - 为什么我的文字周围有空白？它不在 freecodecamp 示例中。非常基础的 CSS/HTML

Question

看这张照片。我的尝试在右边。

是什么导致我的文本上方有一个空白（这也导致其位置降低）？

这是 FreeCodeCamp 的源示例：

https://codepen.io/freeCodeCamp/full/zNBOYG

这是我的尝试：

https://codepen.io/headonshoe/pen/jObERrg

标签： htmlcss

Answer 1

我认为您缺少 line-height 变量。默认情况下，您通常希望字体大小与行高相同。除非你是故意的。

.projects-title {
    font-size: 2rem;
    line-height: 2rem;
    text-align: center;
    padding: 2rem 0.5rem;
}

使用 CSS 总是有多种解决方案。看起来 freecodecamp 正在用<span><</span><span>/></span>.