Bugl — code interview practice that feels like a game

Loading lesson path

The CSS display: inline-block

The display: inline-block property combines the features of both inline and block elements.

An element with display: inline-block will appear on the same line as other inline or inline-block elements. In addition, you can set the width , height , margin-top , and margin-bottom properties for the element (like block elements).

The following example shows the different behavior of display: inline , display: inline-block and display: block :

Example

Formatted code

span.a {
  display: inline; /* the default for span */
  padding: 5px;
  border: 2px solid red;
}
span.b {
  display: inline-block;
  width: 100px;
  height: 35px;
  padding: 5px;
  border: 2px
  solid red;
}
span.c {
  display: block;
  width: 100px;
  height: 35px;
  padding: 5px;
  border: 2px solid red;
}

Live preview

Create a Horizontal Navigation Menu

A common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates a horizontal navigation menu:

Example

Formatted code

.nav {
  background-color: lightgray;
  list-style-type: none;
  padding: 0;
  margin: 0;
} .nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}

Live preview

CSS Property

Property	Description
display	Specifies the display behavior (the type of rendering box) of an element