The CSS property defines the amount of space used for lines, most commonly in the text. line-height It is often confused with used in Photoshop and similar softwares. line spacing (leading) Leading is a term that describes the distance between the baselines in the text. In the case of defining leading, space is . But, when working with line-height property, space is always added . always added below the text equally above and below the text Line-height uses several different types of : units , px , em , % . unitless number It’s important to mention that the . So, if the line-height has a property of it means it just has a value of . unitless value is, basically, just a percentage 1.2, 120% Importance of line-height The most important use of line-height is . It is recommended to use unitless values of any other unit that like the px unit. making your text readable isn’t static If there is a need to set the font size and line-height at the same time, there is a handy CSS : shorthand { : / ‘Lato’, sans-serif; } html font 24px 1.5 By using this shorthand you will be able to set 3 elements at the same time: font-size, line-height, font-family. The line-height property applies only to elements that have their display property set to . If the line-height is set on a block element, there might be some changes, but it is probably just the elements that have been affected. inline or inline-block inline child If you set the line-height without a unit, the result is the . line-height value multiplied by the element’s font-size { : ‘Lato’, sans-serif; : ; : // equals to } div Font-family Font-size 14px Line-height 2 28px Hope this article helped clarify the meaning and usage of the line-height property. Previously published at kolosek.com/css-line-height/
