Can you not add padding-top to a link?

A co worker was asking me this question and the only way I can get it to work is to add <p> tags around the link. I’m wanting to add padding to the top of a link.

This is the code he’s using:


<style>
.link {padding-top: 25px;}
</style>
</head>

<body>
<p>some text</p>
<a href="link.html" class="link">link</a>
</body>

Didn’t know why you can had padding left or right but not the top?

You can have padding-top :slight_smile: In what way does this not work for your co-worker?

It just does not add the padding at all. If you try the code I’ve got up in the previous post it just doesn’t add the padding? So he and I must be doing something wrong here.

You can style anchors like so:
a { padding-top: 4px; }

Or links:
a:link { padding-top: 4px; }

<style>
a:link { padding-top: 4px; }
</style>
</head>

<body>
<p>some text</p>
<a href="link.html">link</a>
</body>

As an aside, regular old (X)HTML ususally provides enough “hooks” so that making “extra” classes, id’s or div’s is not neccessary.

deronsizemore,
the code you posted works in both IE and FF. It adds padding to the link.
In what way does this not work for your co-worker?

The above will add padding to all links (first example) and too all links in initial state (second example) when they’re not visited, active or hovered.

Hi,

An anchor is an inline element and is contained widthin the current line-height. Therefore the total amount of padding you can add is the same as the line height for that line. If you add more padding than the line is high then the padding bleeds over the elements above. Just colour the links background to see whats happening.

You could therefore either increase the line-height to allow more padding to be added or set the anchor to display:block and then padding will apply as normal to block elements.

When I’m testing it here on my machine, it’s not adding any space/width between “some text” and the link. That’s what’s not working. I can add 100px of padding and it does nothing on my end.

That did it Paul. Thanks!

Nice to see ya again. I’ve not been around here for a while. :slight_smile:

Thanks John. It makes perfect sense now that Paul explained it. :slight_smile:

I couldn’t agree more :blush:.