常見的CSS錯誤：顯示內嵌奇怪的空間

Question

目前我有一些問題。

這是因爲我想從浮動display: inline-block;

變化和我在this preview

現在我發現我上面的<nav>

這個陌生的空間效果。如果你看不到的怪空間看看this preview。

當我使用浮動時，這個奇怪的空間是不可見的。 但我反對浮動的設計，我只想使用浮動的圖像。

所以我的問題：如何刪除該空間？

如果有人知道治癒/修復;）謝謝！

Answer 1

內聯流是相當棘手的事情得到正確的;它有助於瞭解vertical-align和line-height如何配合在一起以及它們如何影響它。在這種情況下，解決這個問題的方法之一是nav上的vertical-align: top（它比h1更短 - 如果您願意，可以同時應用）。

Answer 2

這是一個空格字符。因爲內嵌塊的工作方式與塊相同，所以當它們之間有空格字符時，它們將具有可見的分隔符。

要理解它在這個例子更容易看：

<p> 
This 
words 
will 
have 
a 
space 
between 
them 
</p> 

所以，因爲你必須在不同的行的物品代碼：

<ul> 
    <li><a title="home" href="/">home</a></li> 
    <li><a title="login" href="/login">login</a></li> 
</ul> 

...瀏覽器還增加空間的地方新的線路。你有幾個方法來解決它。

把它們放在同一行：李

<ul> 
    <li><a title="home" href="/">home</a></li><li><a title="login" href="/login">login</a></li> 
</ul> 

或者對UL設置font-size: 0;，然後正常的字體大小。這樣li之間的空間將等於0.