why isn't floated div close to upper line, seems like have some margin? - css

Question

I have some questions about this code.
The first inputtxt class element is a simple inline-block display. Last two inputtxt class elements are input text field. Why they show different? Does input text field has default padding? Why the vertical align referring to gray div is different?
All inputtxt class elements have some top and bottom gap distances to previous and following lines. Why?
Thank you so much!
.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

When the div height is smaller than div line-height the browser fits the next elements based on line-height setting by default, this just happen when element is inline-block. To fix it just add a line-height property to the element parent.
Also you can set .inputtxt padding to 0, removing input default padding.
.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

Add the following style to your .inputtxt
padding: 0;
vertical-align: top;