input
and button
elements are inline elements, as such by separating them by a newline in your code, this is effectively interpreted and rendered as a whitespace character, leading to a gap appearing between them.
To solve this, add:
input, button{
margin:0;
}
Then remove the new line from between the elements in your HTML:
Demo Fiddle
<body>
<div id="main_search">
<input id="main_search_input" type="text" placeholder="Suchen" /><button id="search_button">
<img src="https://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/magnifier.png" width="20" style="border-left: 1px solid #D7D7D7; padding: 0 0 0 5px;" />
</button>
</div>
</body>
Alternatives
(also requiring setting no margins, per above)
Float the two elements so they push up against one another
Apply a font-size:0
to #main_search
so the space has a width of zero