額外空白

Question

我想知道爲什麼會出現巨大的白空間上面SEACH酒吧，而無需使用任何保證金或填充，使用inline-block的時候;

小提琴：https://jsfiddle.net/2jf0a7oc/

HTML：

<header> 

<div class="logo"> 
<img 
src="https://www.google.co.in/images/nav_logo.png"> 
</div> <!--END logo --> 

<div class="search"> 
<form action="http://google.com/search"> 
<input type="text" name="q" placeholder="Search..."> 
<input type="submit" value="Go" title="Search"> 
</form> 
</div> <!--END search --> 

</header> 

CSS：

header{ background:white; } 
.logo{ display:inline-block; } 
.logo img{ display:block; height:67px; width:102px; margin:14px 0; } 
.search{ display:inline-block; } 
.search input[type="text"]{ border:0; padding:10px; width:300px; float:left; background:grey; } 
.search input[type="submit"]{ border:0; width:35px; padding:10px; } 

Answer 1

因爲你的造型與inline-block一個display您.search元素它結束了在同正在接受治療作爲文本的方式。這意味着，它的受vertical-align屬性，該屬性默認設置爲baseline。

爲了改善這種情況，我們需要做的就是修改vertical-align屬性不同的東西（即top）：

.search { 
    ... 
    vertical-align: top; 
} 

Modified JSFiddle demo。

Answer 2

使用浮動：左，而不是顯示：inline-block的這兩個標誌和搜索的div。

header{ background:white; margin:14px 0; } 
 
.logo{ float:left } 
 
.logo img{ display:block; height:67px; width:102px; } 
 
.search{ float:left } 
 
.search input[type="text"]{ border:0; padding:10px; width:300px; float:left; background:grey; } 
 
.search input[type="submit"]{ border:0; width:35px; padding:10px; }

<header> 
 

 
<div class="logo"> 
 
<img 
 
src="https://www.google.co.in/images/nav_logo.png"> 
 
</div> <!--END logo --> 
 

 
<div class="search"> 
 
<form action="http://google.com/search"> 
 
<input type="text" name="q" placeholder="Search..."> 
 
<input type="submit" value="Go" title="Search"> 
 
</form> 
 
</div> <!--END search --> 
 

 
</header>

Answer 3

添加垂直對齊於CSS：

.logo { 
    display:inline-block; 
    vertical-align:top 
} 

https://jsfiddle.net/2jf0a7oc/2/