为什么浮动div不接近上线，似乎有一些余量？

Question

我对这段代码有一些疑问。

1. 第一个 inputtxt 类元素是一个简单的内联块显示。最后两个 inputtxt 类元素是输入文本字段。为什么它们表现出不同？输入文本字段是否有默认填充？为什么引用灰色div 的垂直对齐方式不同？
2. 所有 inputtxt 类元素都与前几行和后行有一些顶部和底部间隙距离。为什么？

非常感谢！

.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block; 
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}

<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/> 
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/> 
</div>

Answer 1

当div 高度小于div 时line-height浏览器默认根据行高设置适合下一个元素，这只会在元素inline-block时发生。要修复它，只需将line-height属性添加到元素父级即可。

您还可以将 .inputtxt 填充设置为 0，删除输入默认填充。

.remind{
float: left;
width: 80px;
height: 40px;
background-color: #cccccc;
border: 1px solid black;
}
.inputtxt{
display: inline-block; 
width: 200px;
height: 12px;
border-radius: 5px;
border: 1px solid #999999;
}
.formitm {
line-height: 10px; /*less or equal than inline-block child*/
}

<div class="formitm">
<div class="remind"></div>
<div class="inputtxt"></div>
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/> 
</div>
<div class="formitm">
<div class="remind"></div>
<input type="text" class="inputtxt"/> 
</div>

Answer 2

将以下样式添加到.inputtxt

padding: 0; vertical-align: top;