In-line links are squished

Help Customization
1

I have some CSS set to change the link font & color on one of my blogs. Specifically:

.e-content a {
    color: #80001a;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 1.6em;
    margin: 0;
    padding: 0;
}

This works almost right, but the link text gets shrunk just a tad when compared to the body text surrounding it. When you highlight the text, meanwhile, there’s a bar above and below the link that doesn’t appear in the regular text . This despite margin, padding, and text-decoration all being set to 0. Inspecting the element in Firefox doesn’t show me any applied style that should be doing this.

Any ideas what I’m missing?

2

font-size there is making the a smaller relative to the font-size of the parent element.

1 Like
3

Hmm. I’m not so sure: I have the same font size applied to norm p (since this a serif post), and the link is within that class of <p>.

4

Right. But putting an em size in the a is making it 0.9 em relative to the p’s 0.9em, and so shrinking.

5

Derp, that’s it. I wasn’t thinking about them being nested having that kind of effect too.

Thanks!

6

It would not have occurred to me in your position, because my brain. It only occurred to me as a possibility because I was on the outside.

7

Yup - sometimes an outside perspective is all we need. Thanks very much!