Warum erscheint dieser Raum?

Question

Diese Boxen haben die gleichen Stile, aber unterschiedliche Strukturen.

http://codepen.io/KevanM/pen/mWeOJV (Code unten)

Warum die zweite Reihe haben einen Raum zwischen den Boxen, aber nicht auf dem zweiten - Suche in Chrome-Tools, gibt es keinen Raum, der durch Marge oder padding aufgenommen.

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

.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

Es gibt einen Raum, bevor Sie Ihren span-Tag. Entferne es und der Raum wird weg sein!

<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

Es liegt daran, dass (einige) Ihre Elemente inline-block Anzeigetyp sind, werden sie in den HTML-Code in die Leer empfindlich sind. Wenn Sie den Leerraum zwischen den foo/bar Anker- und Spannenelementen entfernen, wird der Platz nicht mehr angezeigt.

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

Lösungen:
Entfernen Leerzeichen zwischen HTML-Elementen in Ihrem Code.

Oder lesen Sie a good post by David Walsh darüber, wie Sie den Platz in Code entfernen, der in der HTML/CSS-Ausgabe erscheint.

Answer 3

Beachten Sie, dass Räume zwischen der Schließung Ihres Tag und Spanne auf dem zweiten Beispiel haben:

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

entfernen es:

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

, und Sie sollten in Ordnung sein:

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