You can find other entries to the series here.. Transcript. The CSS line-height property acts in a similar way to leading in print design..

Vertical Space: Line-Height and Vertical Rhythm; Quick Reference. Molten leading (or, fluid line-height) Epilogue. For example: body { line-height: 1.5; } The browser multiplies the font size of each element by 1.5 to determine their line height. In CSS, leading refers to the difference between the content height and the value of the line-height property. ; On non-replaced inline elements, the line-height property specifies the height which is used in the calculation of the line box height.

But it’s not. Line spac­ing is the ver­ti­cal dis­tance be­tween lines of text. line spacing 120–145% of the point size. Now meaning the vertical distance from the baseline of one line to the baseline of the next. So simple that most of us are convinced to fully understand how they work and how to use them. On non- replaced inline elements, it specifies the height that is used to calculate line box height. On block-level elements, it specifies the minimum height of line boxes within the element. It’s actually a “triadic” relationship, as Tim puts it: What interests me most here is a fundamental triadic relationship in typesetting — that of a text’s font size, line height, and line length. We'll commonly use the line-height property in the body element to set the overall line-height of the page. The technique described here became known as CSS locks.It is theoretically interesting for all kinds of properties (not only line spacing), but its usefulness is limited because we can't efficiently query elements — and tying single elements' dynamism to media queries causes difficulty. There are three situations: On block level elements, the line-height property specifies the minimal line-height of line boxes in the element. This screencast is a part of our AtoZ CSS Series.

line-height is a css property lead [rhyming with red]: Originally a strip of soft metal used for vertical spacing between lines of type. Line Height. Half the leading is called the half-leading. Most writ­ers use ei­ther dou­ble-spaced lines or sin­gle-spaced lines—noth­ing in be­tween—be­cause those are the op­tions pre­sented by word processors.. Also called leading. The line-height CSS property sets the height of a line box. User agents center glyphs vertically in an inline box, which adds half-leading on the top and bottom. Related Videos. Line-height and vertical-align are simple CSS properties. A small part of that was about Tim’s coined phrase “molten leading”, which is essentially line-height that depends on line length. It's commonly used to set the distance between lines of text. CSS line-height Property The line-height property defines the line-height.