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.
0 kommentar(er)
