为什么我的标题总是在字母下面有额外的空间？

时间：2016-12-24 21:10:13

标签： html css

这是我一直想知道的。出于某种原因，这种情况发生了很多，我不知道为什么。我通常最终只给元素一个高度和一个行高，以便将文本置于其小盒子的中心。

这是我的代码：

<h3 class="hr_title">Things to know before</h3>

然后这是它的CSS。 

.hr_title{
   background-color: navy;
   color: white;
   font-family:proxima-nova, sans-serif;
   font-weight: 100;
}

下面是它的外观照片。

enter image description here

忘了提。即使我添加text-transform：大写或者它们都是大写字母，也会发生这种情况。

3 个答案:

答案 0 :(得分：3)

适用于包含g或j等下行符的字母。即使您没有使用带有下行字母的字母（例如全部上限），它仍然是字符指标的一部分。

<小时/> text-transform:uppercase只是改变了字母的大小。它对字符指标没有任何作用。例如，它不会删除将保留下行符的字符布局部分。

答案 1 :(得分：2)

正如已经指出的那样，由Ascender和Descender引起。另请参阅维基百科的精彩图片：

enter image description here

在这里你可以在实践中再次看到它：

h3 {
   background-color: navy;
   color: white;
   font-family:proxima-nova, sans-serif;
   font-weight: 100;
   font-size:5em;
}
<h3>TEST gg Â</h3>

答案 2 :(得分：-1)

还有一些元素标签的默认边距。如果您没有使用css重置或规范化片段，那么它会影响它。

margin: 0; padding: 0;会修复它

相关问题
最新问题