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

<!DOCTYPE html>
<html>
<head>
  <title>How padding/margin affect floats</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
</body>
</html>

CSS (without reset)

#wrap{
  width: 600px;
    margin:auto;
}

.square{
    width: 200px;
    height: 200px;
    background: red;
    margin-bottom: 10px;
    /*display: inline-block;*/
  float:left;
}

Chris · Answer 1 · 2012-11-26T09:08:57.343

11

I'm doing some tests on float and inline-block and i've noticed there is a difference between them.

Whatever resource gave you the implication that they might not be the same is misleading. They are completely different things.

the divs have a little margin between them

That's not a margin. That's a space resulting from the line-breaks between the divs in the HTML. One solution would be to just remove the line-breaks, another would be to set font-size: 0 on the containing element (thus causing the spaces not to be rendered).

Note that if you use the second method, you'll need to set another font-size on the inner divs, otherwise the text inside them won't be rendered.

Hope that helps!

edited Nov 26 '12 at 09:08

answered Nov 26 '12 at 09:03

Chris

26,544
5
58
71

Thanks, i wasn't aware the line-breaks are being treated as spaces. – Tomer Nov 26 '12 at 09:17
@ftom2 Yep, that's always the case with HTML. Similarly, tabs are rendered as spaces. – Chris Nov 26 '12 at 09:21

Henrik · Answer 2 · 2012-11-26T09:13:24.350

7

It is because of spaces. If you set font-size: 0 on the container element the gaps will go away(make sure to reset the font-size on the inline-blocks).

edited Nov 26 '12 at 09:13

answered Nov 26 '12 at 09:03

Henrik

3,908
27
48

score 2 · Accepted Answer · edited Nov 26 '12 at 09:12

2

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;
}

edited Nov 26 '12 at 09:12

Bojangles

99,427
50
170
208

answered Nov 26 '12 at 09:03

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 4 · answered Nov 26 '12 at 09:15

As I understand it, inline-block elements will display with the same automatic pseudo-margin spacing native to other inline objects. Whereas floated elements are treated as completely independent in relation to the document's object flow (so, no annoying gaps).

Sorry I can't give a more detailed answer, but this is definitely something I've wrestled with before. For what it's worth, the spacing should be reliably annoying for inline-block elements, you just have to remember to compensate for those pseudo-margins if you're trying to everything contained within a parent element without being pushed to the next line.

css inline-block vs float

4 Answers4

Linked