왜이 공간이 나타 납니까?

Question

이 상자는 같은 스타일이지만 구조가 다릅니다.

http://codepen.io/KevanM/pen/mWeOJV (아래 코드)

왜 두 번째 행은 상자 사이에 공간이 않습니다,하지만 두 번째에 - 크롬 도구에서 찾고, 마진이나 패딩에 의해 촬영에는 공간이 없습니다.

<div class="switch"> 
    <p class="english"> 
     <span class="switch-active">Foo</span> 
     <a title="Cymraeg" href="#"> 
      <span class="cymraeg">Bar</span> 
     </a> 
    </p> 
</div> 

<hr /> 

<div class="switch"> 
    <p class="cymraeg"> 
     <a title="English" href="#"> 
      <span class="english">Foo</span> 
     </a> 
     <span class="switch-active">Bar</span> 
    </p> 
</div> 

CSS : 당신의 span 태그 앞에 공백이

.switch p { 
color: #fff; 
} 

.switch .english span.switch-active { 
background-color: #b50038; 
} 
.switch .english span { 
background-color: #bbb; 
padding: 10px; 
} 

.switch .english span { 
background-color: #bbb; 
padding: 10px; 
} 

.switch .cymraeg span.switch-active { 
background-color: #b50038; 
} 

.switch .cymraeg span { 
background-color: #bbb; 
padding: 10px; 
} 

Answer 1

. 그것을 제거하면 공간이 사라질 것입니다!

<div class="switch"><p class="cymraeg"><a title="English" href="#"><span class="english">Foo</span></a>`space comes here`<span class="switch-active">Bar</span></p> 

Answer 2

당신의 요소가 inline-block 디스플레이 유형 (일부), 그들은 HTML 코드에서 공백에 민감하기 때문입니다. foo/bar 앵커와 스팬 요소 사이의 공백을 제거하면 공백이 사라집니다.

.... active">Foo</span><a title="Cymraeg" href="#"><span ... 
         ^^^^^ 
       No gap, no space.    

<hr/> 

...<span class="english">Foo</span></a> <span class="switch .... 
             ^^^^^^ 
            Gap in code, gap in output 

솔루션 : 코드에서 HTML 요소 사이
제거 공백.

또는 HTML/CSS 출력에 나타나는 코드의 공백을 제거하는 방법은 a good post by David Walsh을 읽으십시오. 두 번째 예에서 태그의 폐쇄 및 스팬 사이에 공백이

Answer 3

참고 :

</a> <span class="switch-active">Bar</span></p>

이 제거 :

</a><span class="switch-active">Bar</span></p>

당신은 괜찮을 것 :

.switch .english span.switch-active { 
 
background-color: #b50038; 
 
} 
 
.switch .english span { 
 
background-color: #bbb; 
 
padding: 10px; 
 
} 
 

 
.switch .english span { 
 
background-color: #bbb; 
 
padding: 10px; 
 
} 
 

 
.switch .cymraeg span.switch-active { 
 
background-color: #b50038; 
 
} 
 

 
.switch .cymraeg span { 
 
background-color: #bbb; 
 
padding: 10px; 
 
}

<div class="switch"><p class="english"><span class="switch-active">Foo</span><a title="Cymraeg" href="#"><span class="cymraeg">Bar</span></a></p></div> 
 

 
<hr/> 
 

 
<div class="switch"><p class="cymraeg"><a title="English" href="#"><span class="english">Foo</span></a><span class="switch-active">Bar</span></p>