CODEWITHSUNDEEP
htmlcss-floatcss
Tomer
Tomer

Reputation: 17930

css inline-block vs float

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

Upvotes: 8

Views: 4219

Answers (4)

monners
monners

Reputation: 5302

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.

Upvotes: 0

Henrik
Henrik

Reputation: 4034

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).

Upvotes: 7

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

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

Upvotes: 2

Chris
Chris

Reputation: 26878

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!

Upvotes: 11

Related Questions