Why are some common css skills? (2) What I understand: line-height, cssline-height

Why are some common css skills? (2) What I understand: line-height, cssline-height

Basic terms and concepts to be used:

• Replacement element: an element used as a placeholder for other content, or a part of the content of the replacement element is not directly represented by the document content. For example, the img element is replaced by an image other than the document itself. For example, the input element should be replaced by a single choice button, check box, text input box, and so on. Most of the replacement elements are row-level elements. You can set width, height, padding, and margin like block-level elements.
• Non-replacement element: the content of an element is included in the document, or the content is displayed in the box generated by the User Agent in the element. For example, the text in a paragraph p is placed in this element.

• Em box: the relationship between the common font-size attribute and the actual font size you see is determined by the font designer. This relationship is set to an em box in the font itself, the blue box below. Therefore, font-size is used to provide a size for the em box of the given font (but it cannot be guaranteed that the actual displayed characters are of this size, the actual characters may be higher or shorter than the em box)

• Content Area:

• Line spacing: the difference between the font-size value and the line-height value. This difference is actually divided into two halves applied to the top and bottom of the content area, called the semi-row spacing. The row spacing can only be used for non-replacement elements. Yes, the top line and bottom line constitute the content zone em box.

• In-line box: This box is described by adding row spacing to the content area.

• Line box: each character in a row has its own line box. The line box is the minimum box containing the lowest point of the line box that appears in this row, that is to say, the upper boundary of the row box is located at the upper boundary of the upper box of the highest row, and the bottom edge of the row box should be placed at the lower boundary of the lower box of the lowest row.

VOICEOVER:

• The content area is similar to the content box content in the box model of a block-level element.
• The background of the line element is applied to the content area, all the padding, and border.
• The border of an element in a row must enclose the content area and all its internal and external margins.
• Replacing the internal and external margins and borders of an element will indeed affect the height of the line and box of the element, and will also affect the height of the line and box. Consider the img element.
• The internal and external margins and borders of Non-replaceable elements have no vertical effect on the line elements or their generated elements (that is, the famous margin overlap problem ).

In this way, the subject will be entered:

Part 1: Why is there no use of line-level non-replacement elements, such as setting margin-top and margin-bottom in span?

You may say that setting margin-top and margin-bottom is useless because span is not a block-level element, then I asked you why span's setting of margin-left and margin-right takes effect. They all belong to the margin family? I don't know, so the real reason is not that simple. I analyzed it from the aspect of Row Height. Maybe it is not completely correct, but who knows what the css rendering mechanism is internally or why the w3c stipulates this...

First, you need to know how the line box (that is, the plain point is the line-height of the line height) comes from. Is it determined by the line box, the row-level non-replacement element's Row-level internal box is its content area (I .e. its em box, the popular point is font-size) + the uplink/downlink spacing. As mentioned above, the content area is similar to the content box content in the box model of a block-level element. How do you set margin-top and margin-bottom? Even if you set border-top, boder-bottom, padding-top and padding-bottom are all useless for Row Height. For span, the row height is only related to the em box and the spacing between the upper and lower rows. If the box model is not necessary to reflect the position of elements in the Document Stream, after all, the line height also reflects the height occupied by elements in the Document Stream. If the content area of a span element, such as an img replacement element, contains a border and internal and external spacing, the Row Height of the element is indeed affected.

Part 2: Why is line-height used to vertically center the text of a text or child element?

1 <p style = "height: 50px; background-color: red"> 2 <span style = "background-color: yellow "> 3: Text of child elements 4 </span> 5 </p>

Since padding and border are not set for the span element, the yellow part is the content area of the span element, the font-size inherited by the span element is 16px (the default html font-size in chrome is 16px), and the row spacing in the content area is increased to fill the Row Height of the span element with the parent element, the text is not centered. The content height of the parent element is 50px, so you can set line-height to 50px for the span element directly. Many people mistakenly believe that this is to center the span element. Actually, it is not. The span element does not move, but its row height increases.

Reference: for some concepts, refer to the "css authoritative guide". Most of them are for your understanding. If you have any mistakes, I hope you can point them out so that I can correct them in time.