Shulou(Shulou.com)06/01 Report--

What is line spacing?

In ancient times we used a printing press to produce words. Each word printed is in a separate block.

Line spacing is the legendary thing that controls the vertical distance between two lines of text. In CSS, line-height is used to control the vertical distance between rows.

However, row spacing and half-row spacing still depend on the line-height in CSS. So, how do you use line-height?

By default, browsers use 1. 0-1. 2 line-height, which is an initial value. You can define the line-height attribute to override the initial value: P {line-height:140%}

You can define line-height in five ways.

1.line-height can be defined as: body {line-height:normal;}

2.line-height can be defined as: body {line-height:inherit;}

3.line-height can use a percentage value of body {line-height:120%;}

4.line-height can be defined as a length value (px,em, etc.) body {line-height:25px;}

5.line-height can also be defined as a pure number, body {line-height:1.2}

Abbr. Line-height

The five line-height writing methods can be abbreviated in the font attribute. The value of line-height is followed by the value of font-size separated by a slash, such as: /

Example: body {font:100%/normal arial;}, body {font:100%/120% arial;}, body {font:100%/1.2 arial;}, body {font:100%/25px arial;}

Calculate line-height

Some CSS attributes are inherited, passed down from cascading elements. This is done to make it easier for developers to no longer reset values for future generations.

It's a little complicated for line-height inheritance.

1. Percentage

2, length

3,normal

4, pure number

The so-called line height refers to the vertical distance between the baselines of text lines. To understand this sentence, you must first understand a few basic knowledge:

Top line, center line, baseline, bottom line

The four lines from top to bottom are the top line, the middle line, the baseline and the bottom line, which are very similar to the four lines and three boxes when you just learned the English alphabet. We know that there are top, middle, baseline and bottom in the vertical-align attribute, which are related to these four lines. In particular, remember that the baseline is not the bottom line, the bottom line is the bottom line.

The row height refers to the vertical distance between the baselines of the context lines, that is, the vertical distance between the two red lines in the figure.

Line spacing refers to the vertical distance from the bottom line of one line to the top line of the next row, that is, the vertical distance between the first pink line and the second green line.

Half-leading is half of the line spacing, that is, the vertical distance of area 3 / 2, the sum of the distances of area 1, 2, and 4 is the line height, and the sum of the distances of area 1, 2, and 4 is the font size, so the half-line spacing can also be calculated as follows: (line height-font size) / 2

Content area, inline box, line box

Content area: the area wrapped by the bottom line and the top line, that is, the dark gray background area of the picture.

Inline box, each inline element generates an inline box, which is a concept in a browser rendering model and cannot be displayed. When there is no other factor (padding, etc.), the inline box is equal to the content area, but when the line height is set, the height of the inline box remains the same, and the half-line spacing [(line height-font size) / 2] increases / decreases to the upper and lower sides of the content area (dark blue area).

Line box, which refers to a virtual rectangle of the line, is a concept in browser rendering mode and is not actually displayed. The height of the row box is equal to the maximum value of the line box of all elements in the row (based on the line box with the highest line height value, the other line boxes are aligned to the base in their own way, and the height of the line box is finally calculated). Each line has its own line box when there are multiple lines of content.

Line-height

Once the basic concepts are understood, we can talk about the line-height attribute of the protagonist of this article.

Definition: the line-height property sets the distance between rows (row height), and negative values cannot be used. This property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance rather than the maximum distance between baselines in that element. The difference (line spacing) between the calculated values of line-height and font-size is divided into two halves, added to the top and bottom of a line of text, respectively. The smallest box that can contain this content is the row box.

Div center alignment has always been a difficult problem, the level is easy to solve, margin:0 auto; can solve modern browsers, IE text-align:center. But it's not that easy to center vertically, which is the default.

This is a test. This is a test.

We can use line-block to do this.

This is a test. This is a test.

A single line is relatively simple. Setting line-height to the size of box can achieve vertical centering of single-line text.

Row heights are inheritable, but they are not simple copy parent element row heights, but inherit calculated values.

1232 123

According to the general understanding, since line-height can inherit, the row height of p element is 150%, but this is the truth.

Instead of becoming 150%, it doesn't even have 100%, overlapping! This is the result of inheritance calculation. If the line-height of the parent element has units (px,%), then the inherited value is the value of a specific px level after conversion (there is a conversion to 30px after 10px, but 150% of 10pxvalues have been inherited to the value of the next 30px); in the above example, p gets the line height of 10px*150%=15px, and the font size of P is 30px, so there is overlap.

If the attribute value has no unit, the browser will directly inherit this "factor (value)" instead of the calculated specific value, and its line-height will recalculate the new line-height value based on its own font-size value.

1232 123

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.