There are 3 main types of blocks in HTML: Block-Level, Inline, and Inline-Block. This entry will cover the third of the 3 elements: Inline-Block.
Inline-Blocks takes the best of both worlds of Block-Level and Inline, with looking like Inline on the outside, but behaves like Block-Level on the inside. Inline-Block occupies only the necessary space of the content, and causes no line-breaks, much like Inline; they can be affected by padding and margin, much like Block-Level.
To turn an element into an Inline-Block, use “display: inline-block”.