div 内链接之间的 Css 间隙

Question

这里是 CSS 新手。奇怪的事情发生了，链接之间有间隙，我不知道为什么。

我正在使用 html html5 样板 css 进行重置。

HTML代码:

    <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

正如 Simon 所说，您的 anchor 元素是内联的。这意味着元素之间的空间将呈现为字符空间。 (它可能在视觉上看起来像边距，但实际上不是。)它与单词之间的空格相同。你可以 float ，如果你正在寻找那种布局，或者如果你想让它们保持内联，你可以通过像这样重写你的标记来消除字符空间:

  <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>

仔细观察结束标签是如何向下移动的。这种模式使代码相对易读。处理该问题的其他模式已编目 here .