Inline vs Inline-Block

Building blocks

CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.

Block-level boxes start on a new line and act as the main building blocks of any layout. You can control how much space a block-level box takes up by setting the width of the box (and sometimes the height as well).

These block-level boxes can be separated using borders, margins, padding, and background colours.

inline

inline inline inline

The display property specifies the display behaviour of an element. Setting display can be used to control the layout of an element.

Inline displays an element as an inline element. Any height and width properties will have no effect.

The element will display 'inline', that is, on the same line. Inline elements do not start on a new line and their width is equal to their content. So any width or height settings will have no effects.

There a number of HTML elements which have an inline property by default:

• span
• a
• img

Formatting tags are also inline:

• em
• code
• strong

inline-block

• inline-block
• inline-block
• inline-block

inline-block displays an element as an inline-level block container. You can set height and width values.

This can be distinguished from block as inline-block does not start on a new line. A block element will both start on a new line and occupy the full width available. You can also set the width and height values on a block element.

A common usage of display: inline-block is to display list items horizontally instead of the default vertical block-level arrangement. This is useful for a simple horizontal arrangement of links in a navigation bar.

An inline-block display looks like this:

• Item 1
• Item 2
• Item 3