Indent Hyperlinks that are Same Line

I have three hyperlinks that are displayed on the same line and I would like to shift all three links to the right by a specified number of pixels. Below is my code, I have tried text-indent and it is not working…

nav a {
  background-color: #ccff99;
  color: #333333;
  border-style: solid;
  border-color: #333333;
  border-width: 1px;
  text-decoration: none;
  font-weight: bold;
  text-indent: 20px;
}
<nav>
  <a target="_blank" rel="nofollow" href="#">Home</a>
  <a target="_blank" rel="nofollow" href="#">Services</a>
  <a target="_blank" rel="nofollow" href="#">Contact</a>
</nav>


Try something like this:

nav a {
//Your previous styles. Use padding-left instead of text-indent
padding-left: 20px;
}

If you are looking for some white space before each anchor element then adding padding-left should be sufficient.

If you’re looking to add 20 pixels of space to the left of each link, try:

nav a {
  background-color: #ccff99;
  color: #333333;
  border-style: solid;
  border-color: #333333;
  border-width: 1px;
  text-decoration: none;
  font-weight: bold;
  margin-left: 20px;

}

Remember that padding adjusts the spacing within the given element, which is why your border was pushed 20 pixels extra on the left. If you wanted to add extra space inside the link, you would then use padding.