Padding-top or padding-bottom on a:link not working

HTML & CSS
1

Has anyone ever experienced an issue where they can’t apply padding-top or padding-bottom to a link or even just text? Padding-left and padding-right work just fine. Can anyone shed some light on this?

I have a simple test, no other css styles on the page.
Here is my code:

<a href="#" style="padding-top: 100px;
padding-left: 100px; padding-bottom: 100px;">
This is a link that should have 100px padding-top,
100px padding-left, and 100 px padding-bottom.
</a>

<span style="padding-top: 100px;
padding-left: 100px; padding-bottom: 100px;">
This is regular text that should have 100px padding-top,
 100px padding-left, and 100 px padding-bottom.
</span>

Any help is greatly appreciated!

2

Padding won’t work on inline elements directly, you’ll need to add display: block; for the padding to take effect.

3

oh wow do I feel like a newb. :blush:
Thank you so much.

4

Pretty sure it’s just vertical padding. Horizontal is fine.

5

Yup. That’s exactly what I found.
Interesting…

Thanks again!