space between divs in html5 document

Question

my question is simple. how can i remove the space between div tags?

this is my html document:

<div class="nav">
    <div>option 1</div>
    <div>option 2</div>
    <div>option 3</div>
    <div>option 4</div>
</div>

and the css

div.nav {
    border:1px solid;
}

div.nav > div {
    display:inline-block;
    background-color: #CCC;
    padding: 10px;
    margin:0
}

here is the fiddle where you can see this http://jsfiddle.net/dmsf/7Szjw/3/

the doctime is html5

Answer 1

You have to add float: left; to div.nav > div like this:

div.nav {
    border:1px solid;
}

div.nav > div {
    display:inline-block;
    background-color: #CCC;
    padding: 10px;
    margin:0;
    float: left;
}

Answer 2

try this

<div class="nav">
    <div>option 1</div><div>option 2</div><div>option 3</div><div>option 4</div>
</div>