Why You Should Use Inline-Block when Positioning Elements

Why You Should Use Inline-Block when Positioning Elements

Example

I was recently intro­duced to the idea of using display: inline-block; instead of floats when pos­i­tion­ing ele­ments (thanks Justin). At first it was a bit of a shock to the sys­tem; I had always used floats, why should I change? But with time, the idea of no longer using floats for lay­out star­ted to sound pretty good. For instance, it meant I could for­get about using a clear­fix hack.

After doing some research—and using inline-block in a few projects—I have become a con­vert. And I’m hop­ing I can con­vince you to con­sider using it too.

Before I get too far into it, I need to be hon­est with you: inline-block isn’t a magic fix, but as long as you are aware of its quirks, you can work around them. Also, to cla­rify: I am not ask­ing you to stop using floats alto­gether. Floats still have their uses, but it would pay to be more mind­ful when using them. No more using them willy-nilly!

The float property

Floats were ori­gin­ally used for wrap­ping text, and as such, they can play up when used to align ele­ments. The most well-known issue is that non floated ele­ments don’t recog­nise floated chil­dren. This is due to floated ele­ments being removed from the nor­mal flow of the document.

Another issue (in regards to lay­out) is that you can’t cent­rally float an ele­ment; you are lim­ited to left or right floats only. And an even lesser known issue is that ele­ments in the flow of the doc­u­ment will col­lapse their mar­gins with the ele­ments above and below whereas floated ele­ments will not.

Display: inline-block;

Setting an element’s dis­play to inline-block tells browsers to place that ele­ment inline, but to treat it as though it were a block level ele­ment. This means that we can use inline-block instead of floats to have a series of ele­ments side by side.

An import­ant thing to take note of when using inline-block is that it takes white space into account. What that means is that any white space in your markup will be rendered in the doc­u­ment. Now most of the time this won’t be an issue, but if you need to elim­in­ate it, doing some­thing like this works:

<ul>
    <li></li><!--
 --><li></li><!--
 --><li></li>
</ul>

An altern­ate solu­tion is to set the font-size of the par­ent ele­ment to zero, and then set the required font-size on the children.

Another thing that you will need to be aware of is the way that inline-block ele­ments are ver­tic­ally aligned. I gen­er­ally use vertical-align: top;, but you have a fair bit of flex­ib­il­ity if required. If you don’t want to declare it more than once then you could use this:

* {
    vertical-align: top;
}

Aligning ele­ments that are inline-block

Alright, on to the import­ant stuff. Aligning ele­ments using inline-block is incred­ibly simple; all you have to do is use text-align on the par­ent ele­ment. This gives you the abil­ity to align ele­ments cent­rally, to the left, or to the right. Not only that, but you don’t need to define a width to cen­ter an ele­ment. You can also align ele­ments to the right without the need to reverse their order in the markup.

Since being intro­duced to inline-block, I have been ques­tion­ing how I was able to use floats for so long. I have already encountered situ­ations where inline-block allowed me to pos­i­tion an ele­ment in a way that I could not using floats. Not only that, but I no longer have to con­cern myself with weird browser bugs and clear­fix hacks. Sure inline-block renders white space, but that is to be expec­ted; browsers render inline-block ele­ments as though they were char­ac­ters in a sen­tence. I would much rather work with beha­viour I expect than beha­viour I don’t.

Browser sup­port

I’m sure you’re not sur­prised to hear me say that IE6 and 7 have a few issues with inline-block. That being said, if you do need to sup­port them, you can do so by declar­ing zoom: 1; *display: inline; (The aster­isk tar­gets IE6 and 7). Just make sure that the inline value is lis­ted after display: inline-block.

Addendum

There have been a couple of points brought to my atten­tion that are worth men­tion­ing. Firstly, Christian informed me that IE6 and 7 will cor­rectly render ele­ments that are nat­ively inline as inline-block. And secondly, Justin has made the great sug­ges­tion of using an IE con­di­tional style sheet instead of using the *display CSS hack.

Tweet this

Comments

  1. Pedro Duarte

    Hey man, nicely writ­ten!
    I use inline-block quite a bit, but I don’t rely it on it 100%.
    A lot of sites I work on still require full ie7 sup­port and some­times using float will cause less of a headache.

  2. Joshua Hibbert

    Thanks Pedro. I wanted to make clear that it’s a viable option. I’m sure there are many out there that only use floats.

  3. Christian

    I’ve been using inline-block for a while for nav­ig­a­tion sys­tems. I love your two pro­posed solu­tions for the white space issue, espe­cially the CSS only (font-size: 0) one. One thing that might be worth men­tion­ing is that IE fully sup­ports inline-block on nat­ive inline ele­ments but not on nat­ive block level ele­ments, so the CSS fix you’ve shown is only needed on nat­ive block level elements.

    Good stuff :)

  4. Joshua Hibbert

    That’s a great point regard­ing IE cor­rectly dis­play­ing nat­ur­ally inline ele­ments as inline-block. I’ll add it to the post, thanks Christian!

  5. gentlemedia

    I do use inline-block more often these days too where I would have used floats before. To take care of the whitespaceI I use a neg­at­ive letter-spacing on the par­ent and set the letter-spacing on the ele­ment with inline-block to nor­mal. It does do the job, but the value of the neg­at­ive letter-spacing depends on the font you use, so it is quite tricky. I don’t like the solu­tion with the mark-up. I believe you can also solve it with put­ting everything on one line thus with no spaces and line-breaks. Never thought about set­ting the font-size to 0. Will have an exper­i­ment with that myself.

    Thanks!

  6. Josh Humble

    Thanks for this, Joshua. I’m also one for floats on the major­ity of ele­ments, and I’m now play­ing more with the inline-block dis­play prop­erty. Interesting it takes white space into account. I would sug­gest neg­at­ive mar­gins, but that’s very inac­cur­ate. Like the white space com­ment­ing out approach.

  7. MikeyO

    This has cer­tainly given me some­thing to think about. I’ve been using clear­ing divs at the end of my float­ing ele­ments par­ent but have been look­ing for a new way. I’ve read about the overflow:hidden solu­tion and vari­ous clear­fix hacks but this has intrigued me most of all. I think I’ll give it a go on my next pro­ject, thanks!

  8. Dinesh Khairate

    Thanks! A very good read. I use inline-block for my nav­ig­a­tion reg­u­larly. Now will try to get used to not using floats for my lay­out as well.

  9. Aaron Jensen

    How would you handle left align­ing the first two ele­ments but right align­ing the last? Is that pos­sible without floats?

  10. Joshua Hibbert

    You could use inline-block to align the ele­ments side by side, and then float the last ele­ment to the right. I’m not say­ing stop using floats alto­gether; just recom­mend­ing that you think about when you should use them.

  11. Joshua Hibbert

    That’s a very handy tech­nique, but unfor­tu­nately won’t do exactly what you are after (i.e. the second ele­ment would be centered rather than left aligned). Thanks for the link!

  12. Aaron Jensen

    Well, it would if I put the first two ele­ments in their own list. For my use case I ended up using sep­ar­ate ele­ments and affix­ing them to my grid, then using text align to align the right ones right. Worked out just fine, but requires a grid or some other fixed width & sep­ar­ate ele­ments (which they are in my opinion)

  13. Hugo Giraudel

    I’m start­ing to use display:inline-block when I think it may help me, even if it’s pretty uncom­mun I must say.
    But I feel a little bit like it’s even more hacky to use inline-blocks than floats when it comes to lay­out tricks because, as you said, “browsers render inline-block ele­ments as though they were char­ac­ters in a sen­tence”.
    However, and I think we agree on that, none of both are made for com­plex lay­outs. We’re just work­ing around while display:flex is coming. ;)

  14. Mister Siren

    This art­icle had exactly the illu­min­at­ing con­tent I needed but I was left want­ing for prac­tical examples. Perhaps you might con­sider repla­cing the header image for this post with a live-example, espe­cially for us green­horns who pick through source code for dis­cov­ery and inspiration.

    Cheers

    –Mister Siren

  15. Josh

    Mister Siren, I have included an example at the start of the art­icle. Thanks for the tip!