menu
line-height is the CSS property that adds or subtracts the amount of vertical space between each line of your text element, which is helpful to adjust the readability and the appearance of the text.
taught by Tina May
You can set the line-height in a decimal number that works as a ratio to the element’s font size. So if the paragraph element has a font-size of 20px and a line-height of 1.55, that line height is equal to 31px.
line-height:
Tip: A line-height of 1 will give each line almost the same height as the text itself, which looks very condensed for paragraphs but nicely fit for headings. As a general rule, your paragraph should be at least 1.4 to give it more space.
Oh hey there fellas!
I knew exactly what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can also set the line-height in pixels, but if you change the font-size you’ll need to go back and adjust the line-height if you want it to stay in the original proportion.
line-height:
Oh hey there fellas!
I knew exactly what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can also set the line-height in rem which is always relative to the font-size of the html selector.
line-height:
Tip: In case of rem, if we set the html font-size to 16px, then 1rem = 16px. And if we say 0.75rem then it’s going to equal to 12px (0.75 x 16).
Oh hey there fellas!
I knew exactly what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can also set the line-height back to normal (default), which is about 20% larger than the font size.
line-height:
Oh hey there fellas!
I knew exactly what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
<p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
<p class="style-3">This morning I saw a YouTube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.</p>
</div>Tuition is valuable. But you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
This morning I saw a YouTube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.
/* Change the line-height of the first paragraph*/
.style-1 { line-height: normal; }
/* Change the line-height of the second paragraph*/
.style-2 { line-height: 1.5; }
/* Change the line-height of the third paragraph*/
.style-3 { line-height: 24px; }
Try changing the spacing between lines of each of the following elements, below we’ve put 3 paragraphs with a class of ‘style-1’ ‘style-2’ and ‘style-3’.
You can use different values in pixels or the decimal number, and bring it back to normal (default) if you want to.
Try these (or anything else!):
Copyright 2023