From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Making sense of the line-height property

Making sense of the line-height property - CSS Tutorial

From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Start my 1-month free trial Buy for my team

Making sense of the line-height property

“

- [Instructor] The line-height property controls the height of the line box, which surrounds each line of text. Most browsers set a default between 1.15 and 1.2, meaning the font size is multiplied by whatever that value is. This usually feels a little tight for smaller text, while larger text like headings, it may actually be a little too much space between lines. You can adjust the line-height on any HTML element to improve the readability. So let's grab an element in this document, and I'll start with this paragraph. And let's say that we want to increase the line height slightly. So I'll say line-height. And here you can use any unit like pixels, m, or percent, but unitless values are the most flexible. So I'll say 1.4 and leave that unit off. When I do this, I'm saying take the font size and multiply it by this value. This makes the line-height relative to the font size, so it'll always have the same relative relationship to the font size, regardless of what that font size…

Contents