Css span line heights

line-height и HTML тег span

Элемент с display: inline; не может иметь height . Поэтому, ежели line-height родителя меньше line-height дочернего элемента, строчный потомок увеличивает высоту строки предка, на которой он находится. Между line-height нескольких строчных элементов, находящихся на одной строке, также выбирается то, что больше.

Изменить line-height родителя:
Изменить line-height строчного потомка:

‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it . The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. [w3.org]

Иными словами, если font-size строчного элемента отличается от font-size блочного, то первый может увеличить высоту строки родителя, на которой он находится.

Изменить line-height:
Изменить font-size:

Откуда взялся вертикальный отступ у картинки? Как убрать межстрочный интервал?

У блочного элемента нет высоты строки.

Источник

Why is the span’s line-height useless?

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:

2 Answers 2

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

Источник

Why can’t we set line-height less than 1 for span element?

If I increase the line-height of the span element’s content then the space above and below each individual line increases. But if I decrease the line-height below 1 then nothing happens. Following is the code I am trying; I change the values in the inline style attribute of span

    
 This is a paragraph with a standard line-height. 
This is a paragraph with a standard line-height. This is a paragraph with a standard line-height. 
This is a paragraph with a standard line-height. 
This is a paragraph with a standard line-height. 
This is a paragraph with a standard line-height.
   

You can set a smaller value than 1. But it will only have an effect if the line-height set on the containing block element is even smaller, because otherwise the strut will provide a minimum value for the line height.

6 Answers 6

Line-height is a multiplier of its font-size. Suppose, if you have set font-size to 12px then the line-height set to 1.5 is equal to 12*1.5=18px .

And the fact about the line-height with block level element works as you expect but with the inline level elements the line-height cannot go below to its font-size. So, setting the line-height below the value of 1 is invalid as 0.5*12=6px which is less than the font-size.

If you want to expect its line-height would work below its font-size then you need to explicitly set its style to the block level:

There’s even more thing to know about line-height. Look it at w3c

On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a «strut.»

When an element contains text that is rendered in more than one font, user agents may determine the ‘normal’ ‘line-height’ value according to the largest font size.

In inline level elements the height cannot be set like that the line-height cannot go below its height.

Источник