input输入框与按钮存在间隙，且不能上下对齐问题

博主因为太久没写页面了（之前一直在看JS啥的），四处碰壁之后决定先务实基础，在此记录自己在务实基础的路上所遇到的坑！！！
在我们仿写页面时，经常碰到input标签和button标签并列，如百度首页的搜索框就是一个典型的例子：

然而，当我自己写出的效果：

  <div id="middle">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <div class="search">
      <form action="