span标签为什么会影响input？

span为什么会影响input呢？
input为什么上面会有距离呢？
字体图标怎么才能转化为提交属性或者其他的属性呢？

img

.body{
    width: 500px;
    height: 200px;
    background-color: yellowgreen;

    margin: auto;
    margin-top: 300px;
}
.body>div{
    width: 500px;
    height: 30px;
    background-color: aqua;
    line-height: 30px;
    
    
}
.body>div input{
    width: 200px;
    height: 30px;

    background-color: violet;
    outline: none;
    border: 1px solid red;
}
.body>div span{
    width: 30px;
    height: 30px;
    background-color: yellowgreen;
    font: 30px YouYuan;
    margin-left: 30px;
    
}




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/首页.css">
    <link rel="stylesheet" href="../icont/font_enck2kw2cef/iconfont.css">
</head>
<body>
    <div class="body">
        <div>
            <input type="search">
            <span class="iconfont icon-sousuo"></span>
        </div>
    </div>
</body>
</html>

行内元素 和 行内块元素的区别 这个你可以了解一下

.body>div input加个float:left

给 .body>div
加上 display: flex;