What's the difference between line-height:1.5 and line-height:150% in css?

line-height:1.5 vs. line-height:150%: Understanding CSS Line Height Units

Explore the subtle yet significant differences between unitless line-height values (e.g., 1.5) and percentage-based values (e.g., 150%) in CSS, and learn when to use each for optimal typography and layout.

In CSS, the line-height property controls the amount of space above and below inline elements, effectively determining the vertical spacing between lines of text. While it might seem like line-height: 1.5 and line-height: 150% would produce identical results, there's a crucial difference in how these values are inherited and computed, which can significantly impact your typography and layout, especially in complex nested structures.

The Unitless Value: line-height: 1.5

When you specify line-height with a unitless number (e.g., 1.5, 1.2), this number is interpreted as a multiplier of the element's own font-size. The key characteristic of the unitless value is its inheritance behavior: the multiplier itself is inherited by child elements, not the computed pixel value. This is generally considered the most robust and recommended approach for line-height.

body {
  font-size: 16px;
  line-height: 1.5; /* Multiplier 1.5 is inherited */
}

p {
  /* Inherits 1.5. If p has font-size: 20px, its line-height will be 20px * 1.5 = 30px */
}

h1 {
  font-size: 32px;
  /* Inherits 1.5. Its line-height will be 32px * 1.5 = 48px */
}

Example of unitless line-height inheritance.

The Percentage Value: line-height: 150%

When you use a percentage value for line-height (e.g., 150%, 120%), this percentage is calculated based on the element's own font-size to determine a pixel value. However, unlike the unitless value, it's this computed pixel value that is then inherited by child elements, not the percentage itself. This can lead to unexpected results if child elements have different font-size values.

body {
  font-size: 16px;
  line-height: 150%; /* Computes to 16px * 1.5 = 24px. This pixel value is inherited. */
}

p {
  /* Inherits 24px. If p has font-size: 20px, its line-height will still be 24px, 
     which might be too small or too large relative to its font-size. */
}

h1 {
  font-size: 32px;
  /* Inherits 24px. Its line-height will still be 24px, which is likely too small for a 32px font. */
}

Example of percentage line-height inheritance.

Visualizing the Difference in Inheritance

To better understand the inheritance behavior, consider a scenario where a parent element sets a line-height, and a child element overrides its font-size.

flowchart TD
    A[Parent Element (font-size: 16px)]
    subgraph Unitless Line Height
        B[line-height: 1.5]
        B --> C{Child Element (font-size: 32px)}
        C --> D["Computed line-height: 32px * 1.5 = 48px"]
    end
    subgraph Percentage Line Height
        E[line-height: 150%]
        E --> F["Computed line-height: 16px * 1.5 = 24px"]
        F --> G{Child Element (font-size: 32px)}
        G --> H["Inherited line-height: 24px"]
    end
    A --> B
    A --> E

Comparison of unitless vs. percentage line-height inheritance.

As the diagram illustrates, the unitless value ensures that the line-height always scales relative to the element's current font-size, making it more adaptable to varying text sizes within a document. The percentage value, however, fixes the line-height to a pixel value based on the parent's font-size at the time of calculation, which can lead to disproportionate spacing for children with different font-sizes.

When to Use Which

While unitless values are generally preferred, there are specific scenarios where other units might be considered:

• Unitless (1.5): Always recommended for general text. Provides flexible and scalable line height that adapts to different font sizes within nested elements. It's the most robust choice for maintaining vertical rhythm.
• Percentage (150%): Generally discouraged for line-height on parent elements. Can be used on individual elements if you specifically need a line-height that is a fixed pixel value derived from its own font-size and then inherited as that fixed pixel value. This is rare and often leads to less predictable layouts.
• em (1.5em): Behaves identically to unitless values when applied directly to an element (e.g., 1.5em on an element with font-size: 16px results in 24px). However, em values are relative to the parent's font-size when used for properties like margin or padding, which can cause confusion. For line-height, unitless is clearer.
• px (24px): Sets a fixed pixel value for line-height. This can be useful for very specific, non-scaling elements or when precise pixel control is absolutely necessary, but it makes your design less responsive to font-size changes and accessibility adjustments.