CSS定义字体间距 字体行与行间距

CSS定义字体间距和行间距的方式有多种，本攻略将会讲解最常用的几种方法。

1. line-height属性

line-height属性可以定义元素的行间距，它的值可以是一个数字、一个百分比数值或normal。当值为数字时，它会乘以元素字体大小，得出最终的行间距。例如，下面的CSS代码将设置段落元素的行间距为1.5倍字体大小：

p {
  font-size: 16px;
  line-height: 1.5;
}

当值为百分比数值时，它会相对于元素字体大小计算出最终的行间距。例如，下面的CSS代码将设置标题元素的行间距为150%，即1.5倍字体大小：

h1 {
  font-size: 24px;
  line-height: 150%;
}

当值为normal时，行间距和字体大小有一个默认的比例关系。通常情况下，行间距会略大于字体大小。

需要注意的是，行间距只是定义文字行与行之间的间距，而不是定义文字之间的间距。字体之间的间距可以使用letter-spacing属性来控制。

2. margin和padding属性

除了使用line-height属性，我们还可以使用margin和padding属性来定义元素的上下间距。这种方法适合于需要在元素内部添加其他元素或文字的情况。例如：

h2 {
  font-size: 18px;
  margin-top: 1em;
  padding-bottom: 20px;
}

上面的CSS代码将设置标题元素的上方间距为1个em，下方间距为20px。

3. 使用伪元素before和after

如果我们需要为文字添加上下间距而不影响其他元素，例如我们要让一个段落的首行缩进并且在段落头部添加一个引号标记，我们可以使用伪元素before和after来实现。例如：

p {
  font-size: 16px;
  position: relative;
  padding-left: 2em;
}

p:before {
  content: '"';
  font-size: 24px;
  position: absolute;
  top: -10px;
  left: 0;
}

p:first-child {
  text-indent: 2em;
}

上面的CSS代码将首先给段落添加一个2em的左内边距，然后使用伪元素:before在段落头部添加一个引号标记。接着，我们使用:first-child伪类来将第一行缩进2em。这样就可以实现文字行与行之间的间距效果。