Every browser comes with its own default CSS settings for the size and spacing of web page text, but it is rare that these values are optimal for the presentation of every typeface. I’ve covered sizing text with CSS in a previous article, so that won’t be my concern here: instead, I’ll be concentrating on line-height and margin.
每种浏览器都有其自己的默认CSS设置，用于设置网页文本的大小和间距，但是很少有这些值适合表示每种字体。 在上一篇文章中，我已经介绍了使用CSS调整文本大小的方法 ，因此在这里我不必担心：相反，我将专注于line-height和margin 。
Commonly referred to in the printing industry as leading, line-height is the vertical distance between lines of text in a content block. Depending on the browser and typeface used, line-height will commonly be a default value between 1.2 and 1.4, referred to as the “normal” value. In addition to this numerical value and keyword, leading can also be specified using percentages or a length value such as pixels or ems.
line-height是印刷行业中通常所说的行距 ， 是内容块中文本行之间的垂直距离 。 根据所使用的浏览器和字体， line-height通常是默认值，介于1.2和1.4之间，称为“正常”值。 除了此数值和关键字外，还可以使用百分比或长度值(例如像素或ems)来指定前导。
line-height with a length measurement
line-height和长度测量值导致h1元素的紧缩
Low leading values crams text together, reducing legibility. At the other end, “loose” leading adds too much vertical space, forcing the reader to work overtime as they try to scan continuous lines of text. Selecting the right amount of leading to display text is part of the typographer’s art, and depends on many factors, including the stroke weight and style of the text, font-size and measure length.
较低的前导值将文本塞在一起，从而降低了可读性。 在另一端，“松散”引导增加了过多的垂直空间，迫使读者在尝试扫描连续的文本行时需要加班。 选择合适的行距以显示文本是印刷者的工作之一，并且取决于许多因素，包括笔划粗细和文本样式，字体大小和小节长度。
As a general rule, try to set font declarations as early as possible in stylesheets, creating a default for everything that follows. A typical starting point would be something like the following:
通常，请尝试尽早在样式表中设置字体声明，并为随后的所有内容创建默认设置。 典型的起点如下：
body {
font-family: Calluna Sans, Arial, Helvetica, sans-serif;
font-size: 1.6rem;
line-height: 140%;
}This sets the font size at the root of the element to approximately 22 pixels in height.
这会将元素根部的字体大小设置为大约22像素高。
As a general rule, body text should be set to approximately 20px / 1.42rem for ledgibility.
作为一般规则，主体文本应设置为大约20px / 1.42rem，以实现可辨认性。
The problem is that when set with any length value line-height does not scale across different text sizes, as you can see above: the paragraph text has the correct leading, but that on the h1 element is too tight.
问题是， 当使用任何长度值设置line-height它不能跨不同的文本大小缩放 ，如您在上面看到的：段落文本具有正确的开头，但是h1元素上的开头太紧。
Somewhat unusually in CSS, line-height can be set as a pure number, without any specified measurement system. When set as a floating-point digit, leading does scale correctly across different font sizes:
在CSS中有些不同寻常， 可以将line-height设置为纯数字 ，而无需任何指定的度量系统。 当设置为浮点数字时，前导确实可以在不同字体大小之间正确缩放：
body {
font-family: Calluna Sans, Arial, Helvetica, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
}
Now you’ve guaranteed that leading won’t be too tight for text of any size on your page. As a general rule, paragraph text should be set to a leading value of at least 1.5 to make it legible and accessible. There’s nothing stopping you from altering leading for other elements: it’s safe to assume that headings will require less leading than paragraph text. You can also shortcut the declaration with the font property, as shown below.
现在，您已经确保页面上任何大小的文本的行距都不会太紧。 通常，段落文本的前导值应至少设置为1.5，以使其清晰易读 。 没有什么可以阻止您更改其他元素的开头：可以肯定的是，标题所需要的开头要比段落文本少。 您还可以使用font属性来简化声明，如下所示。
body {
font: 1.6rem/1.5 Calluna Sans, Arial, Helvetica, sans-serif;
}
h1 { line-height: 1; }By specifying leading as a number, you now have the ability to set line-height that will scale proportionally across different font sizes.
通过将前导指定为数字，您现在可以设置line-height ，该line-height将在不同字体大小之间成比例缩放。
行高的其他潜在问题 (Other Potential Issues With line-height)
If you’re using <sub> or <sup> to set superscript or subscript text in a web page, the default line-height on the elements can throw off the leading of paragraphs, as shown in the illustration.
如果您使用<sub>或<sup>在网页中设置上标或下标文本，则元素上的默认line-height可能会导致段落开头，如图所示。
One solution is to set line-height for <sub> and <sup> elements to 0, as I have suggested in my CSS reset and boilerplate: doing so won’t alter the position of subscripted or superscripted text, but will preserve the correct leading between paragraph lines. Alternatively, you can use an OpenType font to typeset superscript text automatically.
一种解决方案是将<sub>和<sup>元素的line-height设置为0，正如我在CSS重置和样板中所建议的那样：这样做不会更改下标或上标文本的位置，但会保留正确的位置。在段落线之间领先。 或者，您可以使用OpenType字体 自动排版上标文本 。
保证金 (margin)
In CSS, margin is used to separate content blocks. In the case of paragraphs, headings, and other text elements, margin-top and margin-bottom is used to provide vertical distance between blocks of text. Setting both to 0 on paragraph text, for example, will provide the impression of continuous paragraphs. If that was the case, you’d typically add text-indent to distinguish the start of each paragraph:
在CSS中， margin用于分隔内容块 。 对于段落，标题和其他文本元素，使用margin-top和margin-bottom提供文本块之间的垂直距离 。 例如，将段落文本都设置为0，将给人连续的段落印象。 如果是这种情况，通常会添加text-indent来区分每个段落的开头：
p {
margin-top: 0;
margin-bottom: 0;
text-indent: 2rem;
}Leaving both margin-top and margin-bottom undeclared will provide normal separation between paragraphs, but leaving the defaults on headings can cause layout issues. For example, with the following markup:
离开这两个margin-top和margin-bottom未申报将提供段落之间的正常分离，但留在标题中的默认设置可能会导致布局问题。 例如，带有以下标记：
<body>
<section>
<h1>A Princess Of Mars by Edgar Rice Burroughs (published 1917)</h1>
<p>In submitting Captain Carter's strange manuscript to you…We will add the following CSS:
我们将添加以下CSS：
body {
font: 1.6rem/1.5 Calluna Sans, Arial, Helvetica, sans-serif;
margin: 0;
background: #333;
}
section {
background: #fff;
width: 70%;
margin: 0 auto;
}
h1 { line-height: 1; }
h1, p {
margin-left: 5rem;
margin-right: 5rem;
}Everything in the CSS would indicate that the h1 should touch the top of the page; instead, we see a result that you can see in the illustration.
CSS中的所有内容都表明h1应该触摸页面顶部； 相反，我们看到的是您在插图中看到的结果。
To fix this issue, we must set margin-top for the <h1> element to 0; we can counterbalance this by pushing the heading down with some padding-top added to the <section>:
要解决此问题，必须将<h1>元素的margin-top设置为0 ； 我们可以通过在<section> padding-top添加一些padding-top来向下推动标题来抵消这种情况：
section {
background: #fff;
width: 70%;
margin: 0 auto;
padding-top: 5rem;
}
h1 {
line-height: 1;
margin-top: 0;
}
h1, p {
margin-left: 5rem;
margin-right: 5rem;
}Thoroughly understanding the contributions of both line-height and margin to text layout will help you tremendously in creating effective design for your web pages.
全面了解line-height和margin对文本布局的贡献将极大地帮助您为网页创建有效的设计。
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
