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.