Search code examples
html-heading

A links in H3 headings appear smaller than the H3 text


The a href links I create with CKeditor are part of h3 headings and appear smaller in font-size, from their counterpart non-link h3 text... For example, if the sentence is:

"We provide Google SEO support", and the word "Google" links to google.com, this word will appear smaller than the rest of that text (say 18px instead of 24px for the rest) and looks funny.

What can cause such a problem? what is worth checking in the text? Here is a link with a live example - You could see the problem in the second heading (h2) right away.

Thanks for you advice,


Solution

  • Provide CSS which format the elements as well as headings.
    Basically I think that your problem comes from assuming that if you format the header element in css it will affect the child elements too, it will not. You can fix it like this:

    h2, h2>a { font-size: 28px; }
    

    This snippet causes all second headers and it's link children to have the same font size.