input 标签为什么会多出1像素？

Question

 * {        
            margin: 0px;
            padding: 0px;
        }
         .box {
             width: 200px;
             border: black 1px solid;
         }
         input {
             width: 198px;
             height: 18px;
             border: solid 1px red;
         }

   

<div class="box">
        <input type="text"/>
</div>

Answer 1

input默认是是 inline-block 并默认与基线对齐，也就是baseline，加上 vertical-align: top;就行 或者 改成 display: block;

Answer 2

楼上正解，你也可以设置

.box{font- size:0;}
.box input {font- size:14px;}

当然input的字体根据你的需要进行设置