搜索框css问题

Question

问题描述今天在做搜索框的时候遇到一个问题,具体见代码,左右两块都用的浮动来做,但是为什么没有填充满,会有一个小黑条呢?问题出现的环境背景及自己尝试过哪些方法我知道,如果把背景色和边框设置为一样的颜色就可以解决,就是想知道,为什么会显现这个小黑条相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）.search-bar {    width:600px;    border: 2px solid #dd182b;    background: black; }.search-bar input,.search-bar button {    border: 0px;    padding: 10px;    float: left;    display: block }.search-bar input {    width: 80%; }.search-bar button {    /* outline: none; */     width: 20%;    background: #dd182b;    color: #fff; }    <div class="search-bar">        <input type="text" name="" value="">         <button type="button" name="button">搜索</button>     </div>你期待的结果是什么？实际看到的错误信息又是什么？就是右边的这个小黑边

Answer 1

*{

  padding: 0;  margin: 0;  box-sizing: border-box;
}
把盒模型更改一下