[Solved] Em cascading issue

[Hung The]

I have one issue which is spinning my head right now. I got along with em’s more or less well so far but here i ran into a nasty one.

I made a simplified markup example. I have the <a> inside the <h2>

http://codepen.io/thehung1724/pen/KwgKKp

Now I want to put <a> tag inside the <h2> but it will too big because em units are relative to their parent. Is there way to fix it? Thank everyone.

[shaneisme]

You could do this:

http://codepen.io/drainpip/pen/jEMONE

But me personally I don’t mess with base-level elements and keep them at 1em always. Base-level elements like, p, li, a, etc…

[Hung The]

Hi,

Thank you, now I can fix my issue by adding class to <h2> :D

[Chris House]

The obvious solution to this problem is to use rems instead of ems. Rems are based on the HTML element instead of the parent, so they don’t compound. Browser support isn’t perfect but there’s a good polyfill: https://github.com/chuckcarpenter/REM-unit-polyfill

[Hung The]

Hi,

Ems also better expect cascading :)

[Author]

Posts