How do I achieve horizontal spacing inside
in html?

Question

I have a simple menu bar and just want to horizontal spacing between a text and hyperlink. Here is my code:

<div id="rectangle">
<p class="x">Home Page
 <a href="hello">Home</a> <a href="user">user</a></p>
</div>

In the style field, I have

p.x {
        color: white;
        font:25px arial,sans-serif;
        position:relative;
        left:20px;
    }

#rectangle {
        width: 100%;
        height: 70px;
        background: deepskyblue;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 20;
    }

I want to have space betwwen "Home Page" and "Home"/"user".

I appreciate if someone could help me.

Its spaces in your html file. You can read about it here[enter link description here][1] [1]: http://stackoverflow.com/questions/12183341/how-to-remove-invisible-space-from-html — Astralian, Jan 02 '14 at 23:05

score 1 · Answer 1 · answered Jan 02 '14 at 23:03

1

There are several solutions to that.

Try the CSS "margin" or "padding" property.

answered Jan 02 '14 at 23:03

Josh Beam

19,292
3
45
68

Francisco Presencia · Accepted Answer · 2014-01-02T23:23:44.503

0

You can give the <a> some horizontal margin. So you can simply do:

.x a:first-child {
  margin-left: 10px;
  }

However, you probably want to check out how to properly make navigation buttons if that's what you want. Using <nav> you can achieve this in html5.

edited Jan 02 '14 at 23:23

answered Jan 02 '14 at 23:05

Francisco Presencia

8,732
6
46
90

This kind of works, but I don't need spaces between two hyperlinks. How do I acheive that? – user3014926 Jan 02 '14 at 23:13
I didn't get that clear from the OP. Updated, now it should work. – Francisco Presencia Jan 02 '14 at 23:24
Thanks for the help. .x a:first-child would select the first of class "x", correct? – user3014926 Jan 02 '14 at 23:30
Exactly. An alternative would be to set a class specifically which would also make it more compatible to very old versions of IE. – Francisco Presencia Jan 02 '14 at 23:36

How do I achieve horizontal spacing inside in html?

2 Answers2

How do I achieve horizontal spacing inside
in html?