CSS Line Height Not Working — The Five Common Causes

You set line-height: 1.5 and nothing changes. Or the change applies to some elements but not others. Line-height has five common failure modes — each with a different fix. Here is how to diagnose and solve each one, in the order they appear most often.

Cause 1 — CSS specificity conflict

Your line-height: 1.5 is being overridden by a more specific selector. Open dev tools, inspect the element, look at the Computed tab. If line-height shows a different value than 1.5, there is a more specific rule winning.

Common culprits: framework resets (Tailwind, Bootstrap), component libraries (MUI, Chakra), or inline styles from JavaScript.

Fix: increase specificity (body p { line-height: 1.5; } beats p { line-height: 1.5; }), or use !important as a last resort. Better: understand why the framework is overriding and adjust the framework's theme variables.

Cause 2 — form elements (input, button, textarea)

Form elements on some browsers (older Chrome, WebKit) apply their own line-height defaults that do not inherit from body. Setting body { line-height: 1.5 } does nothing to a button's line-height.

Fix: explicitly set line-height on form elements:

input, button, textarea, select {
  line-height: inherit;
  /* or explicitly: line-height: 1.5; */
}

Inherit is usually the right call — it respects whatever line-height the surrounding context wants.

Cause 3 — unitless vs. em inheritance difference

This is subtle but common. line-height: 1.5 (unitless) and line-height: 1.5em look identical but inherit differently.

Unitless (1.5): children inherit the multiplier. A child with font-size: 30px gets line-height = 45px (30 * 1.5).

em (1.5em): children inherit the computed pixel value. If the parent is 16px, 1.5em = 24px. Children with font-size: 30px still get line-height: 24px — which is cramped.

Always use unitless unless you have a specific reason not to. The inheritance is what you almost always want.

Sell Custom Apparel — We Handle Printing & Free Shipping

Cause 4 — display: inline ignores line-height wrapping

span elements and other display: inline elements do not create line boxes — they inherit line-height from their block parent. If you set line-height on a span directly, it affects vertical alignment within its line box but does not create visible "line-height" change in the wrapped text.

Fix: set line-height on the nearest block-level ancestor (p, div, article), not on the inline child.

Cause 5 — "normal" keyword varies by font

line-height: normal is the browser default — but "normal" is defined by the font itself, not by CSS. Different fonts have different "normal" values. A font with normal = 1.2 and another with normal = 1.1 render identically-sized text with different line gaps.

If you set line-height: normal somewhere and get inconsistent spacing across fonts, that is the cause. Replace with an explicit numeric value (1.4, 1.5, 1.6) for consistency.

Diagnosis checklist — in order

1. Open dev tools, inspect the element, look at Computed tab for line-height.
2. If it shows a different value — go to Styles panel, find the winning rule.
3. If it is from a framework — adjust theme variables, do not fight the framework.
4. If the element is a form element — set line-height: inherit explicitly.
5. If the element is display: inline — set line-height on its block parent.
6. If you used em and children look cramped — switch to unitless.
7. If your line-height is normal and inconsistent — replace with explicit 1.5 or similar.

After fixing, verify the value passes WCAG 1.4.12 (1.5x minimum) with our spacing checker.

Frequently Asked Questions

Why does line-height work in Chrome but not Safari?

Usually a font-rendering difference. Safari applies slightly different "normal" line-height calculations than Chrome. Always use explicit numeric line-height values (not "normal") for cross-browser consistency.

Does line-height: 0 do anything?

It sets the line box height to 0, causing adjacent lines to overlap. Use case: flexbox centering trickery. Do not use on readable text.

Why is my line-height not working in Outlook email?

Outlook has known rendering bugs with line-height over ~1.5. Use conditional CSS: <!--[if mso]><style> .email-body { mso-line-height-rule: exactly; line-height: 24px; } </style><![endif]-->.

Can I animate line-height?

Yes, with CSS transitions: transition: line-height 0.3s ease. Useful for expanding/collapsing content. Test carefully — animated line-height can feel jarring if not paired with other size changes.