Why is the line-height gap useless?

Question

First, let's see a piece of code:

div { width:200px; height:200px; border:1px solid black; line-height:200px; } span { line-height:1.7; } 

 <div><span>123<br>456<br>789<br>000</span></div> 

Why is line-height span not used?

The line-height still 200px , but when we set the display span property to inline-block , is the line-height span ?

See below:

 div { width:200px; height:200px; border:1px solid black; line-height:200px; } span { display:inline-block; line-height:1.7; } 

 <div><span>123<br>456<br>789<br>000</span> 

Answer 1

Block layouts, such as the default div , consist of a vertical stack of lines that never have space between them and never overlap. Each line window starts with a rack, which is an imaginary built-in block with the height of the line height specified for the block. The line of the line is then continued using the built-in markup blocks according to their line heights.

The diagram below shows the layout for your first example. Please note that since the font height is 1.7 times less than the height of the rack, the line height is determined by the height of the rack, since the line field must completely contain its built-in rectangles. If you set the line height on the span more than 200px, the lines of the lines will be higher and you will see that the text moves further.

When you create an inline span block, the relationship between the div and span does not change, but the range gets its own block layout structure with its own line stack. Thus, text and line breaks are laid out inside this internal stack. The stand of the indoor unit is 1.7 times the font height, that is, the same as the text, and the layout now looks like the one shown below, so the text lines are closer to each other, which reflects the span line height setting,

(Note that the two charts are at different scales.)

Answer 2

This is by design. There are two types of elements in an HTML document: block and inline. Inline elements do not interrupt the flow of a document, but block elements.

Block elements, as the name implies, block the area on the page that contains some content. Some examples of block elements are: <p> and <div> . You can apply the height, line height, and other CSS properties to these elements to resize the block and then the flow of the document.

Inline elements take up the minimum space required for their rendering, which means that setting the width and height for these elements will have no effect. As you have already seen, you can tell the browser to treat the inline element as a block element so that you can apply height to them.

An example of this can be seen when using the <li> elements to create menus. <li> are block elements. If you create a list, the items will be displayed vertically on the page, ensuring that each list item appears below the previous one. However, if you apply display: inline; to list items, they will now be displayed horizontally.