div 내부 링크 사이의 CSS 간격

Question

CSS 뉴비는 여기에 있습니다. 이상한 일이 생기고, 링크 사이에 간격이 생겨서 그 이유를 모르겠습니다.

재설정을 위해 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

를 추가해보십시오 단어 간격과 자간 특성 : 0 인라인 블록으로 표시되는 요소의 부모 요소 : http://jsfiddle.net/RX7cg/17/

Answer 4

나는 최선의 해결책은 글꼴 크기 선언하는 것으로 나타났습니다 .