sbjc23

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

I've tried a number of things but none of them seem to be working effectively.

Status: Open Mar 06, 2007 - 11:42 PM

css, html, Links, Margin

Comments (0) | New Comment

Add New Comment

Do you have the same question? Follow this Question

Answer this question Report it

5answers

Voted Best Answer

jgivoni

Jan 05, 2009 - 10:40 PM

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 tag.
tags are per default 'inline' elements, and as such should always appear inside a 'block' level element, usually

.

Inline elements cannot have top or bottom margins:
http://www.w3.org/TR/CSS21/box.html#m...
(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

Report it

Comments (0) | New Comment

Add New Comment

Answers

jgivoni

Mar 07, 2007 - 04:20 AM

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

.

The correct solution would have been to cast the 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

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

Report it

Comments (0) | New Comment

Add New Comment

sbjc23

Mar 12, 2007 - 03:40 PM

Thanks Jakob

Report it

Comments (0) | New Comment

Add New Comment

tecbrat

Aug 17, 2011 - 07:32 AM

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%;
}

Report it

Comments (0) | New Comment

Add New Comment

maxbond

Jan 06, 2015 - 03:30 AM

You can put a margin around a link by using <margin:auto> in CSS and you also put margin around the images.

Report it

Comments (0) | New Comment

Add New Comment

Answer this question

Share Your Own Experience & Expertise

We look to ensure that every question is answered by the best people with relevant expertise and experience, the best answers include multiple perspectives. Do you have relevant expertise or experience to contribute your answer to any of these commonly asked questions?