CSS Inline-block

The display: inline-block value is a mix of display: inline and display: block.

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

Example 1: inline vs inline-block vs block

display: inline

Hello World

display: inline-block

Hello World

display: block

Hello World

Example 2: Using inline-block to Create Navigation Links

One common use for display: inline-block is to create navigation links horizontally instead of vertically.

Home
News
Contact
About

Example

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}