なぜこのスペースが表示されますか？

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>