Is CSS line-height affected by the parent?

Imagine you are maintaining the design system pattern library. You have a well-established typography component, which is responsible for applying one of the font-size/line-height combinations defined by designers. It's the most used component of a design system, that existed for a long time and seems to be pretty stable.

One day your designer comes to you and says: the typography component uses the correct values for font-size/line-height and is correctly rendered in the component playground, BUT when it's used in one of the applications it renders with a different (incorrect) line-height.

You can't think of any plausible explanation of this behavior. Intrigued, you fire up your browser debugger and open the problematic application to check what's happening there.

You check line-height assigned by the typography component, and it's the same in component playground and in that application. The "Computed" tab of the browser debugger confirms that this exact value is really applied to the element in both cases. You make screenshots of what's rendered, compare them to each other and there's indeed a difference between the playground and the application. The application renders text with a larger line height than the component playground does.

«Weird!» - you think, trying to come up with an explanation for this behavior. «Maybe it's because of some other CSS property?» - you decide to start adding properties from the application to the component playground, hoping to observe what property will result in increase of line height rendered. Your first suspects are text-rendering and -webkit-text-size-adjust but they clearly do not affect the line-height. Next, you copy all of the CSS properties applied, making sure that the "Computed" tab of the browser debugger for the element looks exactly the same between the component playground and the application.

At this point, the only plausible explanation left is that the parent is somehow affecting the line height rendered in the child. You start with changing parent's line-height - and voilà - you can see that it affects child's line height rendered in the component playground. And while in the application parent doesn't have a line-height explicitly set, it still inherits one that was set for one of the ascendants (as line-height is an inherited property).

But how is it possible that parent affects the child's line-height? You start searching for any information online about this weird scenario. There aren't any results that directly talk about line-height in a "parent-child" context. Then you find the relevant CSS spec, and you're lucky to quickly notice the following paragraph there:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

So this isn't a browser bug, it is mentioned in the spec and it is just how CSS works. But why does nobody talk about it? Why, in your 10-year career, you have never heard about a parent setting a minimum line-height for a child? Is it because "slightly bigger line height" does not pose a problem for most people, and sharp designer eye is needed to notice the inconsistency? Maybe, but you feel like there's gotta be another reason.

Looking for answer, you read the whole "Line-height caluclations" section of the spec, and only then you realize that the key detail you were missing is the display property value. The spec quote above specifies that block parent sets a minimum line-height for inline children.

In other words, no one talks about it because developers typically set the line-height on block elements. In your subjective experience, most often line-height is set for the whole page, sometimes it is set for the individual paragraphs, but it's never set for an inline element. Therefore block parent controlling line-height is something that developers expect, and having a line-height set on an inline element is a weird edge case that isn't worth talking about.

The typography component defaults to using inline element to support using two different styles next to each other in an inline context (e.g. using a monospaced font for a specific term inside the text paragraph). However the component author missed that supporting inline elements will make the line-height brittle.

Well, ideally we should simply stop trying to set the line-height on an inline element, and apply it to a block parent instead.

However, this isn't possible for a typography component, as the block parent is typically outside of the component boundaries. IMO the only way for us is to make typography component use block element by default, and only use inline-element when a specific option is present (with explicit disclaimer in the docs that using that option may result in incorrect line-height). Maybe even support an inline-element usage in a dedicated component. Anyway, it is a breaking change, and we should be extra careful doing that.

Parent can affect the line height rendered by a child. However, AFAIK that only happens if the elements in question are a block parent and an inline child. In which case parent sets the minimum line height for a child.

The resolution is:

• either to start setting line-height on the parent instead of the child
• or to change child's display to a value that makes it a block element