0

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

Adrift
  • 58,167
  • 12
  • 92
  • 90
handsome
  • 2,335
  • 7
  • 45
  • 73
  • possible duplicate of [Best way to manage whitespace between inline list items](http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items) – andyb Apr 19 '13 at 20:40

2 Answers2

1

try this

<div class="nav">
    <div>option 1</div><div>option 2</div><div>option 3</div><div>option 4</div>
</div>
WhoMe
  • 94
  • 1
  • 1
  • 10
0

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;
}
Srdjan Dejanovic
  • 1,267
  • 2
  • 18
  • 31
  • 2
    While floating works, you no longer need `display:inline-block` and you should also clear the float afterwards so that the containing div doesn't collapse. http://jsfiddle.net/DyKFb/ – showdev Apr 19 '13 at 20:42