Html 搜索栏上方的额外空白

我想知道为什么在使用内联块时，搜索栏上方有很大的空白，而不使用任何边距或填充

小提琴：

HTML:

---

由于您正在使用

内联块的
显示设置
.search
元素的样式，因此它的处理方式与文本相同。这意味着它受
垂直对齐
属性的影响，该属性默认设置为
基线

要纠正这一点，我们只需将
垂直对齐
属性修改为不同的属性（即
顶部
）：

.search{
...
垂直对齐：顶部；
}

.
对徽标和搜索div使用float:left而不是display:inline块


标题{背景：白色；边距：14px 0；}
.logo{float:left}
.logo img{显示：块；高度：67px；宽度：102px；}
.search{float:left}
.search输入[type=“text”]{边框：0；填充：10px；宽度：300px；浮点：左；背景：灰色；}
.search输入[type=“submit”]{边框：0；宽度：35px；填充：10px；}
将垂直对齐添加到CSS：

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

可能重复的答案在提供重复答案之前，请检查问题的其他答案。我正在编写代码，但这里根本没有答案。只是在发布之后，我才发现在那几分钟里有更多的答案。
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; }

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