Linebreak (in code) causes unwanted margin in HTML output - html

Question

I have a menu, separated by DIV-s.
When this look like that:
<div id="container">
<div>1</div><div>2</div><div>3</div>
</div>
it renderers well, but thats not nice. But if I do that:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
an unwanted space gets in the output. There is a gap between DIV's.
How to fix this?
EDIT:
sorry for everyone. Here is a detailed fiddle:
http://jsfiddle.net/qK5Bq/
.places_histNavigator {
color: #AC3B75;
font-family: georgiab;
font-size: 1.3em;
line-height: 38px;
}
.places_histNavigatorElement {
border-left: 1px solid #F3F2EB;
border-right: 1px solid #C2BEA8;
display: inline-block;
text-align: center;
}
<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
<div style="width: 19%;" class="places_histNavigatorElement">2</div>
<div style="width: 20%;" class="places_histNavigatorElement">3</div>
<div style="width: 15%;" class="places_histNavigatorElement">4</div>
<div style="width: 23%;" class="places_histNavigatorElement">5</div>
</div>
<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
<hr>
<div style="width: 19%;" class="places_histNavigatorElement">2</div><div style="width: 20%;" class="places_histNavigatorElement">3</div><div style="width: 15%;" class="places_histNavigatorElement">4</div><div style="width: 23%;" class="places_histNavigatorElement">5</div></div>

Answer 1

Based on the assumtion posted in the comment, here is a possible solution : DEMO
Inline attributes consider the spaces existing in between the divs, to avoid it, either use block display or added <!--->(html comment mark) in between the divs.
CSS
*{
margin:0px;
padding:0px;
}
#container1,#container2 {
display:block /* this is the key, make sure it's not marked inline */
}
HTML
<div id="container1">
<div>1</div><div>2</div><div>3</div>
</div>
<br />
<div id="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
EDIT
i really dont get what you are trying to achieve, but if you want things to display in one line, check this Updated Demo, consider adding white-space:nowrap; to your code if you want to kill extra white spaces in one line.
CSS (2 lines changed)
.places_histNavigator {
color: #AC3B75;
font-family: georgiab;
font-size: 1.3em;
line-height: 38px;
white-space:nowrap; /* added this */
display:block ; /* optional for uniformity*/
}
2nd EDIT
See, as posted in comment, inline attributes consider even the spaces in between the div's...i.e....if you have a markup like this <div> </div> with nothing in between, and its inline, then space between them WOULD BE PARSED by browser and rendered on webpage, to avoid that, (like i said before) place <!--> or change display type.
Final Demo

Answer 2

add margin:0px; and padding:0px; to your body HTML

Answer 3

If your div elements are set to display inline they are effectively being handled like words, so the HTML formatting is important- in this case new lines create spaces. If you wish to format your HTML but control out this effect, you can set the elements to inline-block then manually control their margins to counter-act this effect, or possibly set word-spacing on the parent.