這個空間爲什麼會出現？

這些盒子具有相同的樣式但結構不同。這個空間爲什麼會出現？

http://codepen.io/KevanM/pen/mWeOJV（下面的代碼）

爲什麼第二行有框之間的空間，而不是在第二 - 尋找在Chrome工具，沒有通過保證金或填充佔用空間。

<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; 
}

來源

2017-02-28 Navek

還有就是你span標籤之前的空間。刪除它，空間將會消失！

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

來源

2017-02-28 12:37:40 Chaitali

這是因爲（部分的）的元件是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元素之間
刪除空白。

或者，請閱讀a good post by David Walsh，瞭解如何刪除出現在HTML/CSS輸出中的代碼空間。

來源

2017-02-28 12:41:29 Martin

請注意，您有空格的標籤關閉和跨度在第二個例子之間：

</a> Bar

其刪除：

</a>Bar</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>

來源

2017-02-28 12:41:55

這個空間爲什麼會出現？

回答

相關問題