Inline-block box model vs. Block box model on layout elements?

Question

Let's see this piece of code :)

HTML

<div class="mid">
    test inline-block
</div>
<div class="mid">
    test inline-block
</div>
<div class="floated">
    test block floated
</div>
<div class="floated">
    test block floated
</div>

CSS

.mid {


 display: inline-block;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    width: 47.5%;
    background: red;
}
.mid + .mid {
    margin-left: 4%;
}
.floated {
    float: left;
    display: block;
    background: green;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
    width: 47.5%;
}
.floated + .floated {
    margin-left: 5%;
}

You can also see the fiddle for testing purpose : http://jsfiddle.net/LdDSJ/

Now my question : on normal size, both inline-block and floated block are side-by-side, it's ok. But note they are not equal in width.

Try to resize the window : the inline-block elements breaks, one going below the other. By the way, I had to put a lower margin-left to that element because it would have break.

I know there's some whitespace around there, so my question is : is it viable to put layout elements display: inline-block instead of display:block + float property ? As all solution provided (How to remove the space between inline-block elements?) seems hacky (font-size:0, using comments, ...) ?

possible duplicate of How do I remove extra margin space generated by inline blocks? — Paulie_D
inline-block elements have spaces in between them. See: css-tricks.com/fighting-the-space-between-inline-block-elements — Moob
So I will reformulate my question : is it viable to put layout elements display: inline-block ? — enguerranws

web-tiki web-tiki · Accepted Answer · 2014-03-26T17:04:54

The CSS property display:inline-block; involves a white-space between elements. The size of this spaces depends on browser. So your calculation :

47.5% + 47.5% + 5% (margin-left) != 100%

Isn't correct because it doesn't include that white-space.

There are many ways to remove that white-space, you can find some here

Edit : to make it very simple ( this can't work in all cases but it can help you choose)

If your question is should I use display:inline-block; (otpion 1) or display:block with float property (option 2), my answer will be it depends on your aim.

Both solutions can need work arounds.

Case 1

You need your elements to expand the total width of container. Use use option 1 so no work around is needed.

Case 2

You need your parent element to expand it's height according to children. Use display:inline-block;

Case 3

You need both (parent's height expand according to children and total width of elements = 100%)

Then you will need work around with both options. For option 1 see here for option 2 you will need to clearfix or float parent container.

Inline-block box model vs. Block box model on layout elements?

1 Answers