Line-height measurement and use, line-height Measurement

Line-height measurement and use, line-height Measurement

1. line-height Definition

Line-height indicates the line height, that is, the distance between two lines of text baselines.

The following is an illustration:

The line height is the distance between two red lines, namely: 1 + 2 + 3 + 4

In actual measurement, the baseline is hard to find and can be measured.PIN to topTo replace the Row Height.

2. Line spacing

The difference between the calculated value of line-height and font-size (in CSS, it is "row spacing") is divided into two halves, respectively added to the top and bottom of a text line content.

Sample Code:

<! DOCTYPE html> 
Effect:

3. line-height
/* The default browser */line-height: normal;/* sets a number, which is multiplied by the current font size to set the line spacing */line-height: 100px; /* set a fixed row spacing */line-height: 1.8;/* set the row spacing based on the percentage of the current font size. */Line-height: 180%;
Note: line-height can be inherited,The descendant element inherits the zoom factor.Instead of calculating the value.
4. The image is not affected by line-height.
In this example, the image size is 150 * 150px.
Sample Code:
<! DOCTYPE html> 
Effect:

 
Note: there is a gap between the image and text,Because the alignment of img is baseline alignment by default.!
Change the baseline alignment of imgBottom alignmentThe following white space can be removed.
img{                vertical-align: bottom;            }
Effect:

 
In this case, line-height should be set to the Image height, that is, 150px.
The sample code for vertical center of text and image is as follows:
<! DOCTYPE html> 
Effect: