CSS Inline-block

display: inline-block combines two behaviors: elements sit side-by-side like inline elements, but respect width, height, margin, and padding like block elements.

.pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eef2ff;
  margin-right: 8px;
}

This was a common way to build horizontal navs and tag/pill lists before flexbox: unlike float, inline-block elements don't need a clearfix, and unlike plain inline, they can have real dimensions. The one quirk to know: whitespace (line breaks) between inline-block elements in the HTML renders as a small visible gap between them — collapse it by removing the whitespace in markup, or just use flexbox instead, which doesn't have this issue at all.