CSS Layout - The inline-block Value

Comparing Display Values

Compared to display: inline, the major difference is that display: inline-block allows you 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.

Use Case: Navigation Links

inline-block is a great choice for creating a horizontal navigation bar where you want each link to have a specific width, padding, and margin, while still flowing horizontally.

.nav-link {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 10px;
  text-align: center;
  background-color: lightgray;
}