Question

我尝试将H1块中的文本与其上方的行对齐（技术上是：在H1中的伪元素之后，whenewer）。而且我对这些街区内的奇怪填充物感到惊讶。

块的CSS（计算）：

box-sizing: border-box;
color: #192A33;
font-family: Lintel-Regular,Arial,Helvetica,sans-serif;
font-feature-settings: "kern", "liga" off, "calt" off;
font-size: 60px;
font-weight: 500;
line-height: 72px;
margin-bottom: 32px;
margin-left: 311px;
margin-right: 0px;
margin-top: 0px;
padding-top: 15px;
position: relative;
text-transform: uppercase;

我使用normalize.css v3.0.3

感谢您的建议。

The Problem, marked red

Answer 1

您标记为红色的部分是由行高引起的。以下将降低线高。

h1 { 

box-sizing: border-box;
color: #192A33;
font-family: Lintel-Regular,Arial,Helvetica,sans-serif;
font-feature-settings: "kern", "liga" off, "calt" off;
font-size: 60px;
line-height: 50px;
font-weight: 500;
margin-bottom: 32px;
margin-left: 311px;
margin-right: 0px;
margin-top: 0px;
padding-top: 15px;
position: relative;
text-transform: uppercase;

}

<h1>Test String</h1>

Answer 2

你不想摆脱它。字形不仅是黑色，还有周围的白色。这个白色使每个字形脱离其他字形和其他线条。这个白色由字体设计师精心挑选。

使用css应用的填充和边距正确添加到构成总字形的已存在的白色中。

当然，您可以通过选择比字体大小和/或负边距更小的行高来进行调整。但这只是黑客攻击（或者如果正确地进行，你可以称之为印刷细化）。最好只接受字形周围有白色的事实。

我的意思是：你的奇怪填充物＆＃39;或者＆＃39;问题标记为红色＆＃39;是默认行为。

如何摆脱H1区块的意外空间

2 个答案: