Admittedly, there were way more use cases pre-Flexbox and friends, but itвЂ™s still useful, as we will see. IвЂ™ve come across many instances of this in the 16 years IвЂ™ve been writing CSS. Most notably, when the current (or parent) font-size is set to 0 and we need to recover what it was one level up. In other cases, it is simply not possible to multiply and divide by a factor and restore the ancestor font size. For example, a third party author may want to override the emoji size, they shouldnвЂ™t also need to override anything else, our CSS should just adapt. However, in the general case the font size may be defined elsewhere.

And ok, when theyвЂ™re both defined in the same rule we can just delegate this to a variable: -m: 2.5 Note that every time we change the font size we also need to adjust top. Note this in the CSS: /* This needs to change every time the font-size changes: */ For example, take a look at this speech bubble: Sometimes, there are workarounds, and itвЂ™s just a matter of keeping DRY. The next few paragraphs are for those thinking вЂњbut when would you ever need this?вЂќ If youвЂ™re already familiar with the problem and just want the solution, skip ahead.

Either you need to set font-size to the grandparent font size instead of the parent one, or you need to set other properties to the parent font size, not the current one. However, I have often come across cases where you actually need to вЂњcircumventвЂќ one level of this. It can be quite useful for making scalable components that adapt to their context size. We are going to refer to em for the rest of this post, but anything described works for all type-relative units.ДЄs you well know, em resolves to the current font size on all properties except font-size, where it resolves to the parent font size. If youвЂ™ve been writing CSS for any length of time, youвЂ™re probably familiar with the em unit, and possibly the other type-relative units.

How to inherit font css