额外空白

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/