Why is the span's line-height useless?

Block layouts, like div elements are by default, are made up of a vertical stack of line boxes, which never have space between them and never overlap. Each line box starts with a strut which is an imaginary inline box the height of the line-height specified for the block. The line box then continues with the inline boxes of the markup, according to their line heights.

The diagram below shows the layout for your first example. Note that because 1.7 times the font-height is much less than the height of the strut, the line height is determined by the height of the strut, since the line box must wholly contain its inline boxes. If you had set the line height on the span to be greater than 200px, the line boxes would be taller, and you would see the text move further apart.

When you make the span inline-block, the relationship between the div and the span doesn't change, but the span gains it's own block layout structure with its own stack of line boxes. So the the text and the line breaks are laid out within this inner stack. The strut of the inner block is 1.7 times the font-height, i.e., the same as the text, and the layout now looks as below, so the text lines are positioned closer together, reflecting the line-height setting of the span.

(Note that the two diagrams are on different scales.)

This is by design. There are two element types within an HTML document: block and inline. Inline elements don't interrupt the flow of the document, but block elements do.

Block elements, as the name suggests, block out an area on the page which contains some content. Some examples of block elements are: <p> and <div>. You can apply height, line-height and other CSS properties to these elements in order to change the size of the block, and subsequently, the flow of the document.

Inline elements take up the minimum amount of space required to render them, which means setting widths and heights on these elements will have no effect. As you've already seen, you can tell the browser to treat an inline element as a block element to allow you to apply heights to them.

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