Liebe Community

Versuche gerade ein kleines Suchformular zu erstellen mit einem Input-Feld und einem Button:

  
<form id="form">  
  <input id="textfeld"></input>  
  <button id="button"></button>  
</form>  

  
#form{  
margin: 0px;  
padding: 0px;  
border: 0px;  
box-sizing: border-box;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
}  
#textfeld{  
margin: 0px;  
padding: 0px;  
border: 0px;  
box-sizing: border-box;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
height: 30px;  
}  
#button{  
margin: 0px;  
padding: 0px;  
border: 0px;  
box-sizing: border-box;  
-webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
width: 30px;  
height: 30px;  
}  

Leider bin ich auf das Problem gestoßen, dass beim IE und Chrome oberhalb und rechts (links button) vom Eingabefeldes ein Rand entsteht, trotz margin, padding und border = 0.
Wie ist es möglich Eingabefeld und Button, beide mit der gleichen Höhe, ohne Lücken zwischen den Elementen und dem Elternelement anzuordnen?

Freundliche Grüsse