3 인라인 블록 divs 사이의 공백

여기 내 jsfiddle입니다. 아주 기본적인 질문이 있습니다. http://jsfiddle.net/DQL2U/3 인라인 블록 divs 사이의 공백

3 개의 탭 (집, 나에 관한 연락처) 사이에 작은 간격이있는 이유는 무엇입니까? 서로 조화롭게 보이게하려면 어떻게해야합니까? 나는 이것이 종종 겪는 문제이지만 해결책을 찾지 못한다는 것을 안다.

<!DOCTYPE html> 

<html> 
    <head> 
     <title> 
      Burak Özmen - A Newbie Web Designer 
     </title> 
     <link rel="stylesheet" href="index.css"/> 
    </head> 

    <body> 
     <nav> 
      <a href="http://www.facebook.com"> 
       <div id="home"> 
        <p>Home</p> 
       </div> 
      </a> 
      <a href=""> 
       <div id="about"> 
        <p>About Me</p> 
       </div> 
      </a> 
      <a href=""> 
       <div id="contact"> 
        <p>Contact</p> 
       </div> 
      </a> 
     </nav> 
    </body> 

</html>

출처

2013-04-14 Burak Özmen

네비게이션의 링크에 float을 설정하십시오.

a { 
    float:left; 
}

출처

2013-04-14 00:52:36 trajce

는 #home, # 정보 및 #contact의 폭을 확장 한 후 매력 같이했다. 감사! –

이유는 마크 업에 공백이 있기 때문입니다. By default the whitespace property is set to normal. 정상

: 이 값은 흰색 공간의 시퀀스를 붕괴 및 선 상자를 채울 필요 라인을 깰 사용자 에이전트에 지시합니다.

공백을 제거하는 방법에는 여러 가지가 있습니다. float; 포함 된 div에 font-size: 0을 입력 한 다음 div 내에서 다시 되돌립니다. 마크 업 자체에서 공백을 삭제하는 것만으로도 가능합니다.

http://jsfiddle.net/DQL2U/4/ (태그 삭제할 필요가 공백)

출처

2013-04-14 01:05:18 thgaskell

3 인라인 블록 divs 사이의 공백

답변

관련 문제