Em cascading issue

[thehung1724]

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>

<h2>
    <a>This is title</h2>
<h2>

CSS

h2{
    font-size: 2em;
}

a{
    font-size: 1.5em;
}

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.

[TechnoBear]

<h2 class="whatever">
    <a>This is title</a>
<h2>

h2{
    font-size: 2em;
}

h2.whatever{
    font-size: 1.5em;
}

Or, if all your links are set to font-size 1.5em, and not just those in the headings, you could set that h2 to 1em, and then the descendant a would be the correct size.

[PaulOB]

Hi,

Alternatively you could just say:

h2 a {font-size:100%}

Or you could use rems for modern browsers and avoid compounding issues altogether.

a {font-size:1.5em;font-size:1.5rem}

(em stands for root em)

Generally you should avoid being that specific for the a element and don’t set anchors to a specific size because 99% of the time they will be nested inside other elements and if you use ems then their size will compound.

Most of the time you want the link to be the same size as the parent so you don’t need to define its font-size at all in most cases. For special cases just add a class when needed.

[thehung1724]

Hi @PaulOB

Thank you, I’ll read about REM , but now I can fix my issue by adding class to <h2> as @TechnoBear mentioned.

[thehung1724]

Hi @TechnoBear

It’s totally solved my issue, thank you