CODEWITHSUNDEEP
htmlhyperlink
Joe Pigott
Joe Pigott

Reputation: 8459

How to make a space between characters

I am making a website on my computer and I have a navigation bar at the top. The links there look like they are part of a sentence, and so I'm trying to make a bigger gap between them. I have tried using spaces between the <a></a>'s, but the spaces didn't appear in the page.

HTML (Nav. Bar):

<div id='header'>
  <img id='tlogo' src="http://i.imgur.com/lVbnNwy.png?1">
  <a class="dif2" href="http://localhost:8080/Howl/Home.html">Home</a>
  <a class="dif2" href="http://localhost:8080/Howl/Rules.html">Rules</a>
</div>

Screenshot of the Nav. Bar:

enter image description here

Upvotes: 0

Views: 124

Answers (6)

user2805476
user2805476

Reputation: 46

like this:

<div id='header'>
  <img id='tlogo' src="http://i.imgur.com/lVbnNwy.png?1">
  <a class="dif2" href="http://localhost:8080/Howl/Home.html">Home</a>
  <a class="dif2" href="http://localhost:8080/Howl/Rules.html">Rules</a>
</div>

Style below:

#header > a {
  float:left
  margin-left:5px;
}

Upvotes: 0

poodle
poodle

Reputation: 107

try putting 'nbsp;' where you want the empty space. http://jsfiddle.net/NA4DB/

   <div>Hello</div>
   <div>&nbsp;</div>
   <div>World</div>

Upvotes: 0

MakeLoveNotWar
MakeLoveNotWar

Reputation: 954

Its better to use <ul>s and <li>s

  • Home
  • Rules

    •  <style>
 ul.menu li {
 display:inline-block;
 padding:0px 5px 0px 0px;
 }
 </style>

    Here is jsfiddle example DEMO

    Upvotes: 0

    Ana Claudia
    Ana Claudia

    Reputation: 507

    Try adding this css:

    <style>
#header a{
     display:inline;
     padding:10px 15px;

  }
</style>

    Upvotes: 0

    UID
    UID

    Reputation: 4514

    Try doing this:

    #header a{
    display: inline-block;
    padding: 10px; /*You can you whatever padding depending on your site*/
}

    Hope this helps!!

    Upvotes: 0

    AgnosticDev
    AgnosticDev

    Reputation: 1853

    You could add CSS

      #header a{
     display:block;
     padding:8px 16px;

  }

    Upvotes: 4

    Related Questions