Question

CSS newbie here.
Strange thing is happening, I have gaps between links, and I don’t know why.

I’m using html html5 boilerplate css for reset.

HTML code:

    <div id="style-switcher">
    <a href="#" id="theme-1" data-theme="css/theme1.css">Link 1</a>
    <a href="#" id="theme-2" data-theme="css/theme2.css">Link 2</a>
    <a href="#" id="theme-3" data-theme="css/theme3.css">Link 3</a>
    <a href="#" id="theme-4" data-theme="css/theme4.css">Link 4</a>
    </div>

CSS

  #style-switcher
  {
     position: fixed;
     top:0;
     left: 0;
  }
  #style-switcher a
  {
     color: #EEEEEE;
     text-decoration: none;
     font-size: 3.3em;
     text-align: center;
     background-color: #333333;
  }

JS Fiddle:
http://jsfiddle.net/RX7cg/

Answer 1

Your links elements are rendered as inline.
I suggest you add float:left; to them,
So there won’t be anymore gap.
View example: http://jsfiddle.net/RX7cg/3/