Html CSS-将H1与跨度符号对齐

我正在为一个网站的部分标题设计样式，但我不能完全得到一个跨度符号和一个H1标题来正确对齐。这是网站上的外观-

令人烦恼的是，当我将代码包含在这个代码段中时，这两个元素似乎是对齐的。当我检查控制台时，span元素似乎在符号周围有一个缓冲区，这会提示它稍微偏离直线，如图中所示。我正在为站点使用引导，这可能是我缺少的隐藏规则吗

.secthead span{
字体大小：粗体；
字号：80px；
字体系列：“Gotham Medium”，无衬线；
}
.部门主管h1{
字体大小：50px；
字体系列：“Gotham Medium”，无衬线；
颜色：#000；
文本对齐：左对齐；
填充：0 0 20px 20px；
}
.截面头h1，跨度{
显示：内联块；
}

---

+；我们是谁

只需使用

垂直对齐：中间在两个标记中，并从
h1
标记的底部移除填充。检查下面更新的代码段


.secthead span{
字体大小：粗体；
字号：80px；
字体系列：“Gotham Medium”，无衬线；
}
.h1{
字体大小：50px；
字体系列：“Gotham Medium”，无衬线；
颜色：#000；
文本对齐：左对齐；
填充：0 0px 20px；
}
.截面头h1，跨度{
显示：内联块；
垂直对齐：中间对齐；
}
+；我们是谁
只需使用
垂直对齐：中间在两个标记中，并从
h1
标记的底部移除填充。检查下面更新的代码段


.secthead span{
字体大小：粗体；
字号：80px；
字体系列：“Gotham Medium”，无衬线；
}
.h1{
字体大小：50px；
字体系列：“Gotham Medium”，无衬线；
颜色：#000；
文本对齐：左对齐；
填充：0 0px 20px；
}
.截面头h1，跨度{
显示：内联块；
垂直对齐：中间对齐；
}
+；我们是谁
您可以使用高度和线条高度


.secthead span{
字体大小：粗体；
字号：80px；
字体系列：“Gotham Medium”，无衬线；
}
.部门主管h1{
保证金：0；
字体大小：50px；
字体系列：“Gotham Medium”，无衬线；
颜色：#000；
文本对齐：左对齐；
填充：0 0 20px 20px；
线高：92px；
}
.secthead h1、.secthead跨度{
高度：92px；
显示：内联块；
垂直对齐：顶部；
高度：92px；
}

+
我们是谁
您可以使用高度和线条高度


.secthead span{
字体大小：粗体；
字号：80px；
字体系列：“Gotham Medium”，无衬线；
}
.部门主管h1{
保证金：0；
字体大小：50px；
字体系列：“Gotham Medium”，无衬线；
颜色：#000；
文本对齐：左对齐；
填充：0 0 20px 20px；
线高：92px；
}
.secthead h1、.secthead跨度{
高度：92px；
显示：内联块；
垂直对齐：顶部；
高度：92px；
}

+
我们是谁
只是添加到OP可能希望使用
.secthead h1.secthead span
而不是
.secthead h1，span
，因此不会将样式应用于所有span。只是添加到这一点上，OP可能希望使用
.secthead h1.secthead span
而不是
.secthead h1，span
，因此，不会将样式应用于所有跨度。