为什么会出现这个缝隙，随着浏览器缩小或者放大就会时有时无，但是大小100%时会有缝隙

如图，浏览器正常大小会出现一个缝隙，

缩小到90%就没有了：

 <div class="search">
                <form action="">
                    <input type="text" placeholder="请输入关键词">
                    <input type="submit">
                </form>
            </div>

.search {
        width: 410px;
        height: 38px;
        border: 1px solid #00a4ff;
        float: left;
    }
    input {
        border: 0;
        box-sizing: border-box;
    }
    .search input[type=text] {
        background-color: pink;
        height: 38px;
        width: 360px;
        padding-left: 20px;
        float: left;
    }
    .search input[type=submit]{
        width: 50px;
        height: 38px;
        background-color: #00a4ff;
        float: left;
    }

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

如果要消除input前面的间隙，将div的font-size设置为0即可。

可以参考这个：https://blog.csdn.net/CJFAN_yo/article/details/78525320?utm_source=blogxgwz9

.search input[type=text]
加 display: inline-block; 试一下

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。它设置在一个固定的框了，所以你放大缩小，如果不在框范围内，就可能会出现这种情况，题主可以修改一下框的设置。
希望对题主有所帮助，望采纳！！