css inline-block vs float

Question

I'm doing some tests on `float` and `inline-block` and i've noticed there is a difference between them. As you can see from THIS EXAMPLE, that if I use `display:inline-block` the divs have a little margin between them but if I use `float:left` it works as expected. Please note that i'm using Eric Meyer's Reset CSS v2.0. Is it because I'm doing something wrong or is this the way `inline-block` behaves (in that case it is not very reliable). HTML ``` How padding/margin affect floats

``` CSS (without reset) ``` #wrap{ width: 600px; margin:auto; } .square{ width: 200px; height: 200px; background: red; margin-bottom: 10px; /*display: inline-block;*/ float:left; } ```

Accepted Answer

Give the parent element `font-size: 0;`.

Then, set the `font-size` of the children to `font-size: 12px` (or whatever size your design dictates), like this:

```
#wrap{
    font-size:0;
}
.square{
    font-size:12px;
}
```

css inline-block vs float

Solution

Problem