CSS內部鏈接的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小提琴： http://jsfiddle.net/RX7cg/

Answer 1

您的鏈接元素會呈現爲內嵌。
我建議你給他們加float:left;，
所以不會再有差距了。
查看示例：http://jsfiddle.net/RX7cg/3/

Answer 2

像西蒙說的，你的錨元素是內聯的。這意味着元素之間的空間將呈現爲字符空間。 （它可能看起來像保證金，但它不是。）它與單詞之間的空格相同。您可以浮動，如果這是佈局的您正在尋找的那種，或者如果你想保持他們在線，您可以通過重寫你類似這樣的標記消除字符空格：仔細

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

嘗試增加字間距和字母間距屬性：http://jsfiddle.net/RX7cg/17/

Answer 4

我發現，最好的解決方法是聲明字體大小：0被顯示爲內聯塊中的元素的父元素上。