div包裹input，不加定位会出现对不齐的问题，求原因

Question

.inp_box{
    position: relative;
    width: 100px;
    height: 20px;
    margin:50px 0;
    background: red;
}
.inp_box1 input{
    position: absolute;
    top: 0;
    left: 0;
}
.inp_box input{
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
}    

<div class="inp_box inp_box1">
    <input type="text">
</div>
<div class="inp_box">
    <input type="text">
</div>

结果：加了定位的input和div一样，不加会对不齐，为什么会出现这种情况？原因是啥？

在线预览

Answer 1

因为 input 是内联元素,有默认的 vertical-align,这个多余的就是 vertical-align 引起的.
你用定位之后就不受周围元素的影响,消除了vertical-align的影响
要消除vertical-align的影响有很多办法,详细的可以看看后面的参夸文章

---

参考文章
CSS深入理解vertical-align和line-height的基友关系
10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

Answer 2

第一个问题 有默认1像素 还是2像素的 字体高度 所以对不齐 你给div加一个font-size:0 不加定位也可以对齐

第二个 那个就是你盒子的背景色 被后面元素压在上面 留下了一条背景色...

Answer 3

总结一下两位的答案
@XYShaoKang

@努力学会微笑

1. div的line-height:0或font-size:0;
2. input的vertical-align:top或bottom或super或text-top或text-bottom;
3. 或者使用我的方法定位