10

I want to give my anchor tags some elbow room. I tried to add both padding and margin, and neither one work (even when I give them a lot, as you can see here):

a {
    line-height: 1em;
    display: inline-block;
    text-decoration: none;
    padding: 120;
    margin: 42;
}

How can I add some spacing between the anchor elements?

The entire kit and kaboodle are here: http://jsfiddle.net/clayshannon/pRgQL/

I ended up going with this: http://jsfiddle.net/clayshannon/pRgQL/18/

2
  • 2
    By using units. Commented Dec 27, 2013 at 22:58
  • 1
    Removed the jsFiddle tag because it states: Do not use this tag to indicate that your question contains a jsFiddle example.
    – John H
    Commented Dec 27, 2013 at 23:09

4 Answers 4

18
<a>1<a/>&nbsp;&nbsp;&nbsp;&nbsp;<a>2<a/>

1    2

non breaking space if you like ..

7
  • So you don't like, everyone is entitled to an opinion. Sometimes simple is as simple is.
    – Kickaha
    Commented Dec 27, 2013 at 23:06
  • No way man, its only a space (inline without header and footer padding). Don't throw out the tools in your box because they are not fashionable.
    – Kickaha
    Commented Dec 27, 2013 at 23:10
  • 1
    There's something called CSS that does the job for you.
    – Ali Gajani
    Commented Dec 27, 2013 at 23:11
  • Maybe I only want to space a single instance, not the whole class. I'm only making the suggestion, you are being obtuse.
    – Kickaha
    Commented Dec 27, 2013 at 23:12
  • 2
    Perhaps &emsp; would better fit your needs here. It gives a 1em width space, instead of the smaller space provided by &nbsp;.
    – nHaskins
    Commented Jul 19, 2017 at 19:54
12

In CSS the different lengths/sizes need to have specific units, the browser doesn't guess your intent, it simply discards invalid property values, in this case I used px, since I'm assuming that's what you wanted to use:

a {
    line-height: 1em;
    display: inline-block;
    text-decoration: none;
    padding: 120px;
    margin: 42px;
}

JS Fiddle demo.

Alternative units include (but are not limited to): em, rem, ex, pt, cm (among others).

References:

1
  • Somethings don't need units. Line height is a great place not to use units. Commented Dec 27, 2013 at 23:18
4

You need to add the units to your margin and padding e.g.

padding: 120px;
margin: 42px;
1

Sir, I may add, that you forgot to add units to your numbers. The numbers must have units, so please try adding px. That should do the magic for you. For example:

a {
    line-height: 1em;
    display: inline-block;
    text-decoration: none;
    padding: 120px;
    margin: 42px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.