Display: inline vs. inline-block

In CSS, the 'display' property specifies an elements display behaviour. More specifically, the type of rendering box that the element employs.

When the 'inline' value is set, the element renders as an explicitly inline box, which may look something like this.

When the 'inline-block' value is set, the display rendering gains additional properties. The height and width of the rendered boxes may be set, likethis.

A noteworthy point of differentiation from the 'block' value, is that no line break is added, preventing the rendered boxes from looking likethis.

For reference, the height and width properties of each of the above examples were set at 100px x 100px, and no manual line breaks were added. Take note of their behaviour, and consider where these display properties may or may not prove useful.