What are best practices for using "display: inline-block"

here is the good article about positioning elements

here is the good article about element sizes, margins and paddings

and after all, my short advice about blocks, inline-blocks and floats: browser has two general models of aligning elements:

1. inline model, blocks stick to each other horizontally making horizontal lines of blocks with line-breaks between blocks, you may think about it like words in the text. Using this model you operate the following properties:

   • font-size
   • line-height
   • text-align
   • vertical-align
   • etc.

2. block model, blocks stick to each other vertically making vertical stack of blocks, you may think about it like paragraphs in the text. Using this model you operate the following properties:

   • margin
   • padding
   • float/clear
   • position
   • etc.

The corresponding model should be used when you are trying to achieve the described behaviour. There is little exception: several blocks with the same float value (e.g. float:left) can behave very similar to several inline-blocks, the difference is in browser compatibility and thу choise should depend on situation.