Line Height: Line-height graphic analysis

When I first entered the front-end, I felt that CSS could be easily configured with display, position, and float layout. As the problem arises in the future, I gradually learned that CSS is not as simple as several style attributes, I recently read some high-performing knowledge to summarize it.

The row height refers to the vertical distance between baselines of the row. To understand this sentence, you must first understand the following basic knowledge:

Baseline, midline, baseline, and baseline

<! Doctype HTML> 

The top-to-bottom lines are the top line, the middle line, the baseline, and the bottom line. They are similar to the four-line three-lattice when only English letters are learned. We know that the vertical-align attributes include top, middle, baseline, and bottom, it is related to these four lines.
In particular, the baseline is not the bottom line, but the bottom line.
Line Height, line spacing, and semi-line spacing
The line height refers to the vertical distance between baselines of the context line, that is, the vertical distance between the two red lines in the figure.
Line spacing refers to the vertical distance between the bottom line of a row and the next line, that is, the vertical distance between the first line and the second line of the Green Line.
The half-line spacing is the half of the line spacing, that is, the vertical distance of Area 3/2, the distance between area 1, 2, 3, and 3 is the same as the Row Height, while the distance between area 1, 2, 4 is the same as the font size, so the half-line spacing can also be calculated as follows: (line height-font size)/2
Content Area, line box, line box
Content Area:The area of the bottom line and top line package, that is, the dark gray background area.

Line box, Each row element will generate a line box. The line box is a concept in a browser rendering model and cannot be displayed. when no other factors are affected (such as padding ), the in-line box is equal to the content area, while the height of the in-line box remains unchanged when the row is set to high, with the half-line spacing [(Row Height-font size) /2] increase/decrease to the upper and lower sides of the content area (dark blue area)
Line box ),A row box is a virtual rectangle box of the line. It is a concept in the browser rendering mode and is not actually displayed. The height of a row box is equal to the maximum value of the row box in all the elements in the row (based on the row box with the highest value as the benchmark, and the other row boxes align with the benchmark in their own alignment mode, the height of the calculated row box). When there are multiple rows of content, each row will have its own row box.
<Div style = ""> <span style = "font-size: 1em;"> Chinese English </span> <span style = "font-size: 3em; "> Chinese English </span> <span style =" font-size: 3em; "> English Chinese </span> <span style =" font-size: 1em; "> English and Chinese </span> </div>
Line-height
After understanding the basic concepts, we can talk about the line-height attribute, the main character of this article.
Definition: The line-height attribute sets the distance between rows (Row Height). Negative values cannot be used. This attribute affects the layout of the row box. When a block-level element is applied, it defines the minimum distance between the basic line of the element, rather than the maximum distance. The difference between the calculated line-height and font-size values (line spacing) is divided into two halves, respectively added to the top and bottom of a text line content. The smallest box that can contain the content is the row box.
Possible Value

 

 
  
 
   
 
    
Value
 
    
Description
 
   
 
   
 
    
Normal
 
    
By default, reasonable row spacing is set.
 
   
 
   
 
    
Number
 
    
Set a number, which corresponds to the current font sizeMultiplyTo set the line spacing. Equal to multiple
 
   
 
   
 
    
Length
 
    
Set a fixed line spacing.
 
   
 
   
 
    
%
 
    
The row spacing is based on the percentage of the current font size.
 
   
 
   
 
    
Inherit
 
    
Specifies that the value of the line-height attribute should be inherited from the parent element.
 
   
 
  

 
It seems very simple, but it seems useless. Let's look at several applications of line-height.
Vertical center of Div text
Div center alignment has always been a problem, and the level is better solved. Margin: 0 auto; can solve the modern browser, and text-align: center in IE. But vertical center is not that simple. The default is like this.
 
<div style="width:150px;height:100px;">                <span>This is a test.<br/>                        This is a test.                </span>            </div>

We can use line-block to do this.
<div style="width:150px;height:100px;line-height:100px;font-size:0;">                <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>                        This is a test.                </span>            </div>

A single line is relatively simple. Setting line-height to the box size enables vertical center of a single line of text.
<div style="line-height:100px;border:dashed 1px #0e0;">                This is a test.            </div>
 

 
High Impact of elements on rows
The row height is the highest row height. The line height is adjusted by line-height. The Row Height of the content area is related to the font size. Padding does not affect the Row Height.
<div style="border:dashed 1px #0e0;margin-bottom:30px;">                <span style="font-size:14px;">This is a test</span>            </div>            <div style="border:dashed 1px #0e0;">                <span style="font-size:14px;padding:20px;">This is a test</span>            </div>

Although the content area of the second span increases because of padding, the row height does not change.
Row Height inheritance
The row height can be inherited, but it is not a simple copy of the parent element. The Row Height inherits the calculated value.
<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">                <p style="font-size:30px;">                    1232<br/>                    123                </p>            </div>
In general, since line-height can be inherited, the Row Height of the P element is also 150%, but this is the case.

Instead of 150%, even 100%, no overlap! This is the result of inheritance calculation. If the line-height of the parent element is in units (PX, %), the inherited value is a specific PX-level value after conversion; in the above example, the Row Height of P is 10px * 150% = 15px, And the font size of P is 30px, so there is an overlap.
If the property value has no unit, the browser will directly inherit this "factor (value)" instead of the calculated value, in this case, its line-height will be recalculated based on its own font-size value to obtain the new line-height value.
<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">                <p style="font-size:30px;">                    1232<br/>                    123                </p>            </div>

Therefore, when using line-height, you should try to use a multiple value unless you deliberately do not.
 
Original http://www.cnblogs.com/dolphinX/p/3236686.html