[RESOLVIDO] Posição de um <button> sendo influenciada por outra div

Front-end
,
#1

Meu objetivo é deixar o input e o button alinhados:

divs
Percebam que tem um espaçamento indesejado acima do button, mas eu não entendo o por quê dele estar ali. Eu tentei usar um margin-top de 3px (que é o tamanho do espaçamento) no input, mas não adiantou. O resultado foi esse:
divs2
Eu digo que esse espaçamento está sendo influenciado pelo input e pela div que o contém, pois quando tiro ambos do documento o espaçamento também desaparece.

A unica forma que eu achei para resolver isso foi setando no button uma position: relative e um top: -3px, mas não me parece uma solução muito boa.
Gostaria de saber o por quê disso acontecer: Se é alguma configuração padrao do css/html, se é o jeito como os elementos foram posicionados, etc…

Html:

       <div id="conteiner" class="search-box">
          <form action="search.php" method="GET">
            <div id="conteiner" class="search-input">
              <input id="search-box" class="input" type="text" name="q" placeholder="Pesquisar">
            </div>
            <button id="search-box" class="submit" type="submit">
              <div id="search-icon">
                <div class="search-icon__head"></div>
                <div class="search-icon__body"></div>
              </div>
            </button>
          </form>
        </div>
#2

Onde está o css desse bloco? Está usando css puro ou algum framework (ex: bootstrap)?

Abraço.

#3

Estou usando css puro mesmo.

body{
  margin: 0;
  font-size: 0;
}
#conteiner.search-box{
  width: 25%;
  height: inherit;
  background-color: yellow;
  float: center;
}
#conteiner.search-input{
  display: inline-block;
  width: 80%;
  height: 34px;
  box-sizing: border-box;
}
#search-box.input{
  width: 100%;
  height: inherit;
  box-sizing: border-box;
  padding: 0;
  border-radius: 0;
  border: 1px solid gray;
}
#search-box.submit{
  position: relative;
  padding: 0;
  height: 30px;
  width: 15%;
  top: -3px;
  box-sizing: content-box;
  border-radius: 0;
  border: 1px solid gray;
}

Esse aqui é o css do icone. Como ele está dentro do button, acho que isso deve influenciar também de alguma forma.

#search-icon{
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.search-icon__head{
  width: 10px;
  height: 10px;
  border: 2px solid rgb(138, 135, 135);
  border-radius: 50%;
}
.search-icon__body{
  width: 2px;
  height: 10px;
  background-color: rgb(138, 135, 135);
  transform: translate(7px, -3px) rotate(-40deg);
}
#4 
#conteiner.search-box{
    display: flex;
    align-items: center;
}

se for colocar margin, coloca dentro do search-box e não dentro do input/button.