AtoZ CSS截屏视频：CSS Line-Height属性

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

The CSS line-height property acts in a similar way to leading in print design.

CSS line-height属性的行为与打印设计中的领先行为相似。

It allows us to control the spacing between lines in paragraphs, headings and other text elements.

它使我们可以控制段落，标题和其他文本元素中各行之间的间距。

line-height can also be used as a base to create consistent vertical rhythm and spacing throughout an entire project.

line-height还可以用作基础，以在整个项目中创建一致的垂直节奏和间距。

In this episode, we’ll look at:

在本集中，我们将看：

• the difference between line-height and leading

  line-height和行距之间的区别

• using line-height for vertical alignment and

  使用line-height进行垂直对齐并

• using the value of line-height to set up site wide default spacing.

  使用line-height的值设置站点范围的默认间距。

line-height与领先 (line-height vs. Leading)

Leading is a typesetting term which describes the distance between the baselines in the text. The term comes from the days of hand-typesetting when strips of lead were used to space out the block of type. When talking about leading, the space is always added below the line.

前导是一个排版术语，描述了文本中基线之间的距离。 该术语来自手工排版的时代，当时使用铅条隔开字体。 在谈论领导时，总是在行下方添加空格。

line-height is a CSS property that controls the height of a line where the spacing is equal above and below the text.

line-height是CSS属性，用于控制文本上方和下方的间距相等的行的高度。

If I have a paragraph with 1em or 16px font-size, and a line-height of 24px, there will be 4px of space added above the text and 4px of space added below; the height of the line will be

如果我的段落的font-size为1em或16px ， line-height为24px ，则文本上方将添加4px的空间，文本下方将添加4px的空间； 线的高度将是

4 + 16 + 4 = 24px

This is the major difference between line-height and leading. In CSS, the text is vertically centered within the line and in print, the space is added beneath the line.

这是line-height和行距之间的主要区别。 在CSS中，文本在行内垂直居中，在打印中，空格添加在行下。

垂直居中 (Vertical Centering)

We can use this knowledge of line-height to create a crude form of vertical centering – something that is typically quite difficult to do in CSS.

我们可以使用这种关于line-height知识来创建粗略的垂直居中形式-在CSS中通常很难做到这一点。

Let’s take a look at an example.

让我们看一个例子。

I want to create an image rollover effect and display a semi-transparent title with vertically centered text over the top of an image.

我想创建一个图像翻转效果，并在图像顶部显示一个垂直居中的半透明标题。

I’ll create a container and add a 400x400 image inside of it. I’ll now add the title inside with a line of text. This overlay title will be placed on top of the image with position:absolute and then given a semi-transparent background. As I know the height of the image and image-container, I can use line-height to vertically center the text within the box.

我将创建一个container并在其中添加400x400图片。 现在，在标题内添加一行文本。 该叠加标题将以position:absolute放置在图像顶部，然后提供半透明背景。 据我所知图像和图像容器line-height ，我可以使用line-height将文本在框内垂直居中。

There’s one small downside to this technique as if the text is too long and wraps onto multiple lines, the height of each of those lines will be 400px and the text will overflow the box.

该技术有一个小的缺点，即文本太长并且会缠绕多行，每行的高度将为400px ，文本将溢出框。

For an alternative approach to vertical alignment, keep a look out for “Episode 22: Vertical Alignment in CSS”.

对于垂直对齐的替代方法，请注意“第22集：CSS中的垂直对齐” 。

项目宽间距 (Project Wide Spacing)

We’ve seen how line-height can control the spacing of lines of text in a paragraph. I like to carefully pick this value and use it as an underlying foundation for most spacing throughout a site.

我们已经看到line-height如何控制段落中文本的行距。 我喜欢仔细选择此值，并将其用作整个站点中大多数间距的基础。

I’ll often set default font-size and line-height on the body which will then cascade down through all my text elements. line-height can be specified in pixels, ems, rems, percentages or can be left unitless. With unitless line-height, which is my preference, all elements receive vertical spacing of their font-size multiplied by my “spacing factor”. I often use 1.5 as my factor but as it’s predominantly set in one place, it’s easy to change.

我经常会在body上设置默认的font-size和line-height ，然后依次层叠所有我的文本元素。 line-height可以以像素，em，rems，百分比指定，也可以不加任何单位。 使用我首选的无单位line-height ，所有元素都将获得其字体大小的垂直间距乘以我的“间距系数”。 我经常使用1.5作为我的系数，但由于它主要设置在一个位置，因此更改很容易。

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

If my default font-size is 16px then all paragraphs will have a line-height of:

如果我的默认font-size为16px则所有段落的line-height均为：

1.5 * 16 = 24px

If my default h1 font-size is 2em then it will have an equivalent font-size of 32px and an equivalent line-height of 48px

如果我的默认h1 font-size为2em则它的等效字体大小为32px ，等效line-height为48px

16 * 2 = 32px 
32 * 1.5 = 48px

I would continue to use this 1.5 factor throughout the rest of the site. I’d add 1.5em margin beneath headings, paragraphs, list, list-items and form inputs. If I wanted a larger amount of space between elements, I’d double my 1.5em to 3em. If I wanted less space – perhaps for padding around buttons or form inputs, I might half it to 0.75em or quarter it to 0.375em. The aim of the game is to keep the factor consistent throughout.

我将在整个网站的其余部分继续使用这个1.5系数。 我将在标题，段落，列表，列表项和表单输入下面添加1.5em边距。 如果我想在元素之间1.5em出更大的空间，可以将1.5em扩大为3em 。 如果我想要更少的空间–也许是为了在按钮或表单输入周围填充，我可以将其减半至0.75em或四分之一至0.375em 。 游戏的目的是使整个因素保持一致。

With this consistent spacing set up, if I were now to change the default font size in the body, the relative spacing in and around each element would remain consistent too.

通过设置此一致的间距，如果现在我要更改body的默认字体大小，则每个元素及其周围的相对间距也将保持一致。

Working out this spacing multiplier is probably one of the most important things to do at the start of a new project. If any specific elements need to be adjusted away from the “magic factor”, that’s totally do-able, but I think it’s always smart to set a good solid foundation and then build upon that, rather than dialing everything in by eye each time where there’s a risk of things not lining up or being inconsistent from page to page.

制定这个间距乘数可能是在新项目开始时要做的最重要的事情之一。 如果需要从“魔术因素”中调整任何特定的元素，那是完全可行的，但是我认为，建立一个良好的坚实基础然后再以此为基础总是明智的，而不是每次都在视线范围之内可能会导致页面之间排列不整齐或不一致。

小建议 (Quick Tip)

Now, in this bonus quick tip, we’ll look at a shorthand for setting font-size and line-height together to save yourself a couple of extra keystrokes.

现在，在这个额外的快速技巧中，我们将介绍一种将font-size和line-height在一起的快捷方式，以节省一些额外的击键。

line-height, as discussed in the original screencast video, is a property for setting the height of a line in CSS. It’s similar (but slightly different) to leading in print design.

如原始截屏视频所述 ， line-height是用于在CSS中设置线条高度的属性。 与领先的印刷设计类似(但略有不同)。

秘诀1 (Tip 1)

line-height only applies to elements that have their display set to inline or inline-block and it actually sets the height of the line box that bounds the element. If you set line-height on a block element, you may still see some changes to your styles but it’s actually the inline child elements that are being affected as line-height is an inherited property.

line-height仅适用于其display设置为inline或inline-block元素，并且实际上设置了限制该元素的线框的高度。 如果在block元素上设置line-height ，您可能仍会看到样式的某些更改，但是实际上，由于line-height是继承属性，因此实际上是inline 子元素受到影响。

When setting line-height without a unit (as I recommend in the video), the computed value is the line-height multiplied by the current element’s font-size.

当不使用单位设置line-height (如我在视频中建议的那样)，计算得出的值是line-height乘以当前元素的font-size 。

{
  font-size: 20px;
  font-family: 'Avenir', sans-serif;
  line-height: 1.5; /* 30px */
}

秘诀2 (Tip 2)

If you need to set both line-height and font-size at the same time, there’s a handy shorthand via the font property.

如果您需要同时设置line-height和font-size ，则可以通过font属性获得一个便捷的简写。

This shorthand allows you to set font-style, font-variant, font-weight, font-size, line-height and font-family in a single line.

该简写允许您在line-height设置font-style ， font-variant ， font-weight ， font-size ， line-height和font-family 。

The snippet from the tip above, could be combined into a single font shorthand as follows:

上方提示的代码段可以合并为一个font速记，如下所示：

{
  font: 20px/1.5 'Avenir', sans-serif;
}

When using this shorthand syntax, the order of declaration is important.

使用此速记语法时，声明的顺序很重要。

1. The font-family must be the last declaration

   font-family必须是最后一个声明

2. The line-height must follow the font-size immediately and be separated by a forward slash /

   line-height必须立即跟随font-size ，并用正斜杠/分隔。

3. font-style, font-variant and font-weight must be defined before font-size and line-height.

   必须在font-size和line-height之前定义font-style ， font-variant和font-weight 。

A full example using all the available font properties may look as follows:

使用所有可用字体属性的完整示例如下所示：

{
  /* style | variant | weight | size/line-height | family */

  font: italic small-caps 700 20px/1.5 'Avenir', sans-serif;
}

翻译自: https://www.sitepoint.com/atoz-css-screencast-line-height/