Display property of CSS is very useful and commonly used property which contains many values. This tutorial explain display:inline-block property.
If you want to create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float property, but now with inline-block, it is much easier.
Inline-block elements are similar to inline elements, the only difference is they can have padding and margins added on all four sides. And it allows setting a width and height on the element.
If inline-block compared to block elements, the main difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the difference between inline, inline-block, and block-level elements.
By using display: inline-block property, list items display horizontally instead of vertically. The below example creates horizontal navigation links.
Note:
- The inline-block elements are affected by the vertical-align property, which you probably want set to top.
- For each column, you need to set the width.
- The only disadvantage of display: inline-block is that in IE7 and below an element can only be displayed inline-block if it was already inline by default. This means that instead of using <div> you have to use <span> element. It is not really a huge disadvantage at all because semantically a <div> is for dividing the page while a <span> is just for covering a span of a page, so there's not a huge semantic difference.