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的影响有很多办法