CSS inline-block的尺寸差異

我有如下HTML代碼：CSS inline-block的尺寸差異

<section class="container"> 
    <div class="search"></div> 
</section>

而這些CSS規則：

*, *:before, *:after { 
    box-sizing: border-box; 
} 

body, section, div { 
    margin: 0; 
    padding: 0; 
} 

html, body { height: 100%; } 

.container { 
    display: inline-block; 
    position: relative; 
} 

.search { 
    display: inline-block; 
    padding: 3em; 
    border: 1px solid black; 
}

如果檢查section元素，你會看到它有5px的大小...我沒有建立大小。我離開瀏覽器自動計算這與孩子的大小。

爲什麼這種行爲？

來源

2013-06-28 leoMestizo

嘗試添加'垂直對齊：top'爲'.search'元素。 –

[的jsfiddle（http://jsfiddle.net/6HaaP/） – Blender

@MaratTanalin我想知道爲什麼會出現這種行爲= /修不好 – leoMestizo

的原因是因爲inline-block的您正在使用的container和search元素。這個想法是，inline-block將元素視爲段落中的文本;那就是inline。因此，雖然元素本身是block元素，瀏覽器增加了，因爲你實際上在你HTML.空白的元素之間的一些空間，就像在一個p標籤如何增加空間把單詞之間有空格，之間的兩個inline-block要素投入之間的間隔將空白要素。

話雖這麼說，有幾個方法來解決這個問題：

最小化的HTML。可能是最簡單的方法。代碼中沒有空格，只需將所有內容強制爲一行，如下所示：<section class="container"><div class="search"></div></section>。（警告：這是未經測試的。）
添加負邊距：這有點破解，但您可以通過使用瀏覽器的檢查元素功能來了解添加了多少空間，負利潤率。也就是說，如果兩個元素之間有4px的空間，則應用以下內容：margin:-4px;。（默認情況下，瀏覽器將在inline-block元素之間應用4px的保證金空間。）如果您使用em或百分比，則可以使用響應式設計。
使用別的東西。如果您嘗試vertical-align，那麼inline-block並不總是要走。這是一個很好的資源：http://phrogz.net/css/vertical-align/。