Quote:
Why does it happen
Your browser treats the line break as whitespace: not as a line break, but as a space.
A simple example to prove this:
a
b
The above code returns
a b
in the browser, however, if you remove the line break, then the code is this:
ab
And the above code returns
ab
in the browser.
Quote:
how to avoid those spaces?
Add
float: left;
to every style attribute:
<div style="margin: 0; display: inline-block; float: left;">first div</div>
<div style="margin: 0; display: inline-block; float: left;">second div</div>
Note: I suggest to create a CSS class instead of using the
style
attribute.
In your
<head>
tag, add this
<style>
tag:
<!--
<style type="text/css">
div.nospaces {
margin: 0;
display: inline-block;
float: left;
}
</style>
And now when creating your
div
, use
class="nospaces"
instead of
style="..."
:
<div class="nospaces">first div</div>
<div class="nospaces">second div</div>