CODEWITHSUNDEEP
htmlcsstexthyperlink
Stew
Stew

Reputation: 19

How to take html link from space between two hyperlinks?

simply question for beginner: Is it possible to take (omit) the hyperlink from the space between my header text links (see code below).

body {
    background-color: #6B6B6B;
    font-family: Arial;
    color: #D7D7D7;
    font-size: 15px;
    margin: 0px;
}
.links {
    font-family: Arial;
    color: #8f8f8f;
    font-size: 20px;
    letter-spacing: 1px;
}
p.space { /* header space lenght */
    word-spacing: 50px;
}
<p class="space">Home Gallery</p>

<p class="space"><a href="home.htm">Home </a><a href="gallery.htm">Gallery</a></p>

Upvotes: 0

Views: 56

Answers (2)

Mikhail Pashkov
Mikhail Pashkov

Reputation: 103

Just move space outsite of the <a> tag

body {
    background-color: #6B6B6B;
    font-family: Arial;
    color: #D7D7D7;
    font-size: 15px;
    margin: 0px;
}
.links {
    font-family: Arial;
    color: #8f8f8f;
    font-size: 20px;
    letter-spacing: 1px;
}
p.space { /* header space lenght */
    word-spacing: 50px;
}
<p class="space">Home Gallery</p>

<p class="space"><a href="home.htm">Home</a> <a href="gallery.htm">Gallery</a></p>

add: If you want to use spaces inside <a> tags you can write something like:

<a href="about.htm">About&#8192;us</a>

Upvotes: 0

Johannes
Johannes

Reputation: 67748

Yes, if you apply a class to the second link which has a margin-left:

body {
  background-color: #6B6B6B;
  font-family: Arial;
  color: #D7D7D7;
  font-size: 15px;
  margin: 0px;
}

.links {
  font-family: Arial;
  color: #8f8f8f;
  font-size: 20px;
  letter-spacing: 1px;
}

.space {
  /* header space lenght */
  word-spacing: 50px;
}

.space2 {
  margin-left: 50px;
}
<p class="space">Home Gallery</p>

<p><a href="home.htm">Home </a><a href="gallery.htm" class="space2">Gallery</a></p>

Or if you treat the space as a separate element:

body {
  background-color: #6B6B6B;
  font-family: Arial;
  color: #D7D7D7;
  font-size: 15px;
  margin: 0px;
}

.links {
  font-family: Arial;
  color: #8f8f8f;
  font-size: 20px;
  letter-spacing: 1px;
}

.space {
  /* header space lenght */
  word-spacing: 50px;
}

.space2 {
  width: 50px;
  display: inline-block;
}
<p class="space">Home Gallery</p>

<p><a href="home.htm">Home </a><span class="space2"></span><a href="gallery.htm">Gallery</a></p>

Upvotes: 1

Related Questions