How do I put a margin around a link in CSS?

The short answer is that you cannot put a top or bottom margin on an inline element.
The <a> tag is an inline element, and should appear inside a block element like <p>.

The correct solution would have been to cast the <a> element as an inline-block:
[In CSS]
a.withMargin
{
display: inline-block;
margin: 50px 10px;
}

But the "inline-block" unfortunately is not supported by all browsers. For me, Firefox 2 didn't respond to it.

Instead I believe you should put the margin on the containing block element.
I don't know if there is a better solution in your specific case, but if you post some of your code and explains how it should look, we might find out.

For instance - if your link is not inside a <p> tag and really is not part of a line of text, you can just put "display: block" on it and it will behave like a normal block element and have whatever margins you set.

Jakob

Thanks Jakob

The answer depends on whether your link is part of a text paragraph or living by itself.

First some background:
A normal hyperlink in HTML is created with the <a> tag.
<a> tags are per default 'inline' elements, and as such should always appear inside a 'block' level element, usually <p>.

Inline elements cannot have top or bottom margins:
http://www.w3.org/TR/CSS21/box.html#marg...
(quote) "[...] vertical margins will not have any effect on non-replaced inline elements."
Setting vertical margins on these elements will simply be ignored.
(A 'replaced inline element', in case you were wondering, is for instance an inline image, which CAN have vertical margins.)

You can set horizontal (left and right) margins, though:
a.myLink
{
margin-left: 10px;
}

If your link is not part of a paragraph, you can consider turning it into a block level element and then you will be free to give it margins as you wish:

a.myLink
{
display: block;
margin: 5px 10px;
}

Best regards,
Jakob

Click here to see the Answer Discussion that preceded this tutorial.

Login to rate this tutorial: Good  |  Bad

I know this is an old thread, but it might stil be helpful. Try line-height for vertical space on links.
a.myLink
{
line-height:200%;
}

Click here to see the Answer Discussion that preceded this tutorial.

Login to rate this tutorial: Good  |  Bad