[Study Notes] line-height_html/css_WEB-ITnose in css

It’s been almost ten days since I wrote an article. One article a week is really hard to say... I originally wanted to continue the previous incident (Part 1) and summarize the types of incidents, but after reading it, it’s still a bit messy to sort it out. , I just kept putting it off and didn't write it... I really can't put it off any longer. Today I will briefly talk about the line-height attribute in CSS that we commonly use but don't necessarily really understand.

Basic concepts

Line height, line spacing

Line height refers to the vertical distance between the baselines of text lines. So what is the baseline? Do you remember that the vertical-align attribute has a baseline value, and this baseline is the baseline. Take a look at this "stealed picture" (selected from the reference article below), I actually modified it~

Note: The second to last picture is the baseline, the bottom That root is the bottom line, not the baseline.

The distance between the two red lines in the picture is line-height (line-height), and the distance between the bottom line of the previous line and the top line of the next line is line spacing, and the distance between the top line and the bottom line of the same line is the size of font-size, half of the line spacing is half line spacing, half line spacing, font-size, line-height The relationship between them can be seen at a glance in the lower right corner of the picture~

半行距 = （line-height - font-size）/2

Of course, the half-line spacing may also be a negative value (when line-height < font-size), then there is will overlap, as shown in the figure below:

4 types of boxes

The four types of boxes to be mentioned are inline box, line box, content area, and containing box ~

• inline box (inline box)
  Each inline element will generate an inline box. The inline box is a concept in the browser rendering model and cannot be displayed. The height of the inline box is equal to font -size, When line-height is set, the height of the inline box remains unchanged, but the line spacing changes.

• line box (line box)
  A line box refers to a virtual rectangular box of this line, consisting of in-line boxes in this line. Line boxes are also a concept in browser rendering mode and cannot be displayed. The height of the line box is equal to the maximum value of the height of all inline boxes in this line. When there are multiple lines of content, each line has its own line box.

• content area (content area)
  The content area is a box surrounding the text and cannot be displayed. Its height depends on font-size and padding. Personally think: The height of the content area = font-size padding-top padding-bottom, which needs to be verified. I also look forward to the answers from my friends~

• containing box
  The containing box is a box that wraps the above three types of boxes. It’s a bit convoluted~ Look at the picture

Forgive me for my limited drawing skills, but I can still identify it carefully. It can be seen~ ^_^

Value

Generally, the default line-height of the browser is 1.2. You can customize line-height to overwrite this initial value, so how to set line-height? There are the following 5 ways:

It seems so simple~ However, line-height is an inheritable attribute, and its inheritance rules are a little complicated...

Inherited

needs to be advanced in advance The explanation is: the size of line-height is closely related to font-size. In addition to specifying the px of line-height, the remaining setting methods are calculated based on font-size .
Let’s talk about it one by one~

• inherit
  There is actually nothing to say about this. It inherits the value of line-height of the parent element, so the value of the parent element is the same.
  If its descendant element does not set line-height, it will also be this value.

• length
  Assuming that line-height is set to 20px, then the line height of this line is 20px, which has nothing to do with font-size and will not change with font-size. Corresponding scaling.
  This length value (20px) will be inherited by descendant elements, and all descendant elements will use the same inherited line-height (20px) unless the descendant element sets line-height.

• Percentage
  Assume that your font-size is 16px and line-height is set to 120%. Then its line height is: 16 * 120% = 19.2px. That is, line-height is calculated based on its own font-size.
  The child element will inherit the line-height of the parent element, so what does it inherit, the percentage (120%)? Or 19.2px?
  The answer is the latter, 19.2px, which is the final value of the parent element line-height after calculation.

• normal
  When line-height is set to normal, the line height depends on the browser's parsing, usually 1.2.
  Different from the previous one, for an element whose line-height is set to normal, its child elements no longer inherit the calculated final value of its line-height, but are calculated based on the font-size of the child element itself. See the table below~
  

  element	font-size	line-height	计算后的lline-height
  body	16px	normal	16px * 1.2 = 19.2px
  h1	32px	normal	32px * 1.2 = 38.4px

  It can be seen that the sub-elements scale accordingly with the size of their own font-size.

• Pure numbers
  If you want the flexibility of normal but also want to set a custom value, then use Pure numbers~
  The only difference between pure numeric mode and normal is the size of the value. Pure numeric mode can be set at will, while the value of normal is determined by the browser.
  

  element	font-size	line-height	计算后的lline-height
  body	16px	1.5	16px * 1.5 = 24px
  h1	32px	1.5	32px * 1.5 = 48px

  Its descendant elements will inherit this value (such as 1.5), and then calculate their own line-height based on their own font-size.

The summary is as follows:

So, which one is the best way?
Generally speaking, setting the line height value to pure number is the most recommended way, because it will scale with the corresponding font-size.

This is a summary of line-height, friends are welcome to give feedback~

Reference

MDN line-height
In-depth understanding of css line height Line Height property
CSS line height??line-height