81

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 the span's line-height unused?

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

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
SKing7
  • 2,204
  • 4
  • 21
  • 29

2 Answers2

118

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.

Layout with span as inline

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.)

Layout with span as inline-block

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 1
    @Pilot - The struts are the green boxes. [*Strut* in CSS 2.1 spec](http://www.w3.org/TR/CSS2/visudet.html#strut) – Alohci Apr 08 '14 at 18:18
  • The only thing I have to add is that if you have an element that is `inline`, you can change the `line-height` as long as it's bigger than the size of the text and/or image in it and smaller than the containing block(some of them, like `

    `, resize automatically so the `line-height` can go up to infinity). If you want to make the `line-height` bigger than the containing block, you have to change the containing block's size. If you want to make it smaller than the text and/or image, you need to use `inline-bolck`.

     – JustinCB Sep 23 '17 at 19:33
  • 1
    I realize that the two images have different scales, but the second image still seems to show wrong proportions within itself. The inner line boxes are far too big. They should be (as is written in text in the diagram) only 1.7 times bigger than the font-size. Similar to how it is shown in the first image. – Sámal Rasmussen Nov 23 '17 at 10:04
  • Sorry my mistake, it is applying in all cases – AvcS Nov 15 '18 at 15:08
26

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.

John H
  • 14,422
  • 4
  • 41
  • 74