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?](http://stackoverflow.com/questions/1801589/how-do-i-remove-extra-margin-space-generated-by-inline-blocks) — Paulie_D, Mar 26 '14 at 16:57
`inline-block` elements have spaces in between them. See: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Moob, Mar 26 '14 at 16:57
So I will reformulate my question : is it viable to put layout elements display: inline-block ? — enguerranws, Mar 26 '14 at 17:01

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

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.

edited May 23 '17 at 11:52

Community

1
1

answered Mar 26 '14 at 17:04

web-tiki

99,765
32
217
249

I'm aware of that, the real question is : how to avoid it and use display: inline-block for layout purpose ? – enguerranws Mar 26 '14 at 17:05
@enguerranws I posted a link to a SO question/answer that already answers that very well. – web-tiki Mar 26 '14 at 17:07
Yes, but all those solutions are just kinda hacks, don't you think ? – enguerranws Mar 26 '14 at 17:08
@enguerranws I don't think you can call them hacks, they are work arounds. The best solution (depending on your aim and if you need the parent container to expand it's height according to children) would be to use floats so you don't need those work arounds. – web-tiki Mar 26 '14 at 17:10
I agree with that, but would you use inline-block elements for fluid layout purpose ? – enguerranws Mar 26 '14 at 17:18
@enguerranws I use it in fluid layouts when elements don't need to expand to 100% width see my update – web-tiki Mar 26 '14 at 17:24

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

1 Answers1