line-height
Quick Summary for line-height
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
Code Usage for line-height
/* Keyword value */ line-height: normal;  /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5;  /* <length> values */ line-height: 3em;  /* <percentage> values */ line-height: 34%;  /* Global values */ line-height: inherit; line-height: initial; line-height: revert; line-height: unset; 
More Details for line-height

line-height

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

Syntax

/* Keyword value */ line-height: normal;  /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5;  /* <length> values */ line-height: 3em;  /* <percentage> values */ line-height: 34%;  /* Global values */ line-height: inherit; line-height: initial; line-height: revert; line-height: unset; 

The line-height property is specified as any one of the following:

a <number> a <length> a <percentage> the keyword normal.

Values

normal

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

<number> (unitless)

The used value is this unitless <number> multiplied by the element's own font size. The computed value is the same as the specified <number>. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.

<length>

The specified <length> is used in the calculation of the line box height. Values given in em units may produce unexpected results (see example below).

<percentage>

Relative to the font size of the element itself. The computed value is this <percentage> multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).

-moz-block-height

Sets the line height to the content height of the current block.

Accessibility concerns

Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

W3C Understanding WCAG 2.1

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Percentagesrefer to the font size of the element itself
Computed valuefor percentage and length values, the absolute length, otherwise as specified
Animation typeeither number or length

Formal syntax

normal | <number> | <length> | <percentage>

Examples

Basic example

/* All rules below have the same resultant line height */  div { line-height: 1.2;   font-size: 10pt; }   /* number/unitless */ div { line-height: 1.2em; font-size: 10pt; }   /* length */ div { line-height: 120%;  font-size: 10pt; }   /* percentage */ div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */ 

It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.

Prefer unitless numbers for line-height values

This example shows why it is better to use <number> values instead of <length> values. We will use two <div> elements. The first, with the green border, uses a unitless line-height value. The second, with the red border, uses a line-height value defined in ems.

HTML
<div class="box green">  <h1>Avoid unexpected results by using unitless line-height.</h1>   length and percentage line-heights have poor inheritance behavior ... </div>  <div class="box red">  <h1>Avoid unexpected results by using unitless line-height.</h1>   length and percentage line-heights have poor inheritance behavior ... </div>  <!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> <!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want --> 
CSS
.green {   line-height: 1.1;   border: solid limegreen; }  .red {   line-height: 1.1em;   border: solid red; }  h1 {   font-size: 30px; }  .box {   width: 18em;   display: inline-block;   vertical-align: top;   font-size: 15px; } 
Result

Specifications

Specification
CSS Inline Layout Module Level 3 # line-height-property

See also

font, font-size Select your preferred language English (US)EspañolFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk
Random CSS Property

skewX()

The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a <transform-function> data type.
skewX() css reference