Line-height of css Basics

Line-height of css Basics
What is line-height (Row height )? What is the difference between line-height setting 1.5 and 150%? This is a common css interview question. Let's take a look at this question. Is Row Height the height of a row in a text segment? Not specifically. W3school is defined as follows: the line-height attribute sets the distance between rows (Row height). This attribute affects the layout of row frames. When a block-level element is applied, it defines the minimum distance between the basic line of the element, rather than the maximum distance. What is a baseline? The baseline is not the bottom of a Chinese character. From the perspective of English letters, the bottom of letters a, B, and c is the position of the baseline. By default, the vertical alignment of the text is baseline and baseline ), the blue line in the figure below is the baseline. The height between the baseline and baseline is called the line-height of the row height. Note: block-level elements have a row height. Line-height has five possible values: normal, number, length, %, and inherit. One-to-one Introduction: normal, default value. Different browser values are different, probably in the range of 1.1-1.2 times of the element font-size. number is a number, which is called a scaling factor, the zooming factor is multiplied by the element font-size to get the row height. The Specific Row Height of the length is length; % percentage. The Row Height is obtained by multiplying the font-size of the element; inherit inherits the parent-level line height. If the text is not intuitive enough, let's look at the demo below: