0

I am trying to put some links at the top of my site on the right side but when I do this I get a small about ten pixel space between them. Can someone please explain what is going wrong with it.

Html: 

<div id="socialLinks">
     <a href="www.google.com">Google</a>
     <a href="www.facebook.com">Facebook</a>
</div>

Css:

#socialLinks{
    /* Positioning */
    margin-left:auto;
    text-align:right;   
}

#socialLinks a{
    /* Sizing */
    padding-right:5px;
    padding-left:5px;

    /* Decoration */
    text-decoration:none;
    background-color:#9FD9FF;

    /* Font */
    font-family:"Times New Roman", Times, serif;
    font-size:25px;

    /* Border */
    border-style:solid;
    border-right-style:none;
    border-width:2px;
    border-color:#000000;
}
ztirom
  • 4,382
  • 3
  • 28
  • 39
user2892875
  • 99
  • 1
  • 1
  • 9

2 Answers2

1

Browsers like to condense all whitespace into a single space when rendering (view this StackOverflow question for more information). This is caused by the browser, not by your stylesheet. This is a property of HTML in which new lines are to be treated as spaces.

To remedy the issue, you can place all of your <a> tags on the same line, however the code won't look very clean (as shown on this JSFiddle)

Community
  • 1
  • 1
Mike Koch
  • 1,540
  • 2
  • 17
  • 23
-1

Try changing:

padding-right:5px;
padding-left:5px;

to

padding-right:0;
padding-left:0;

or if padding isn't being set elsewhere, just remove the lines entirely.

EDIT: @j08691 is right, this didn't work at all. It's the whitespace between the two a tags. Answer left unedited for your downvoting pleasure.

Will
  • 4,075
  • 1
  • 17
  • 28