CSS Inline-block permits the addition of the width and height on the element. This property is used to display an element as an inline element (like <span>). The height and width properties are not affected on display: inline; property. It allows only the left and right sides of margins, not the top, and bottom. This property is commonly used to render the list items horizontally instead of vertically.

Syntax

display: inline-block;

Example: The example illustrates the difference between three values including inline, block, and inline-block.

Output:

Default Value and Inline-block value

The default value renders the elements vertically whereas when property display with value inline-block applied all elements positioned horizontally.

Example: The example illustrates comparison between the value inline-block and without value.

Output

Difference between Inline-block, Block and Inline