Question

CSS新手在这里。奇怪的事情正在发生，我的链接之间存在差距，我不知道为什么。

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

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小提琴： http://jsfiddle.net/RX7cg/

Answer 1

像西蒙所说，你的主要元素是内联的。这意味着元素之间的空格将呈现为字符空间。（它可能在视觉上看起来像边缘，但它不是。）它与单词之间的空格相同。您可以浮动，如果这是您正在寻找的那种布局，或者如果您想让它们保持内联，您可以通过重写您的标记来消除字符空间：

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

Answer 2

您的链接元素呈现为内嵌我建议你为他们添加float:left;，这样就不会有任何差距了查看示例：http://jsfiddle.net/RX7cg/3/

Answer 3

尝试添加字间距和字母间距属性：http://jsfiddle.net/RX7cg/17/

Answer 4

我发现最好的解决方案是在显示为内联块的元素的父元素上声明font-size：0。

div内链接之间的Css间隙

4 个答案: