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 · Accepted Answer · 2012-11-26 09:08:57Z

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, 2012 at 9:08

answered Nov 26, 2012 at 9:03

Chris

27k6 gold badges61 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tomer Over a year ago

Thanks, i wasn't aware the line-breaks are being treated as spaces.

Chris Over a year ago

@ftom2 Yep, that's always the case with HTML. Similarly, tabs are rendered as spaces.

Henrik · Accepted Answer · 2012-11-26 09:13:24Z

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, 2012 at 9:13

answered Nov 26, 2012 at 9:03

Henrik

4,08430 silver badges51 bronze badges

Comments

Bojangles · Accepted Answer · 2012-11-26 09:12:14Z

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, 2012 at 9:12

Bojangles

102k50 gold badges175 silver badges209 bronze badges

answered Nov 26, 2012 at 9:03

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Comments

monners · Accepted Answer · 2012-11-26 09:15:42Z

0

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.

answered Nov 26, 2012 at 9:15

monners

5,3422 gold badges31 silver badges47 bronze badges

Collectives™ on Stack Overflow

css inline-block vs float

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related