Inline-Block
The best of both worlds — elements that flow inline but respect width and height.
Step 1 of 4
Why inline-block exists
You've learned that inline elements ignore width and height, and block elements always break to a new line. But what if you need both — an element with a fixed size that still sits next to its neighbors? That's exactly the problem display: inline-block solves. It gives you the sizing power of block elements with the flow behavior of inline elements. You'll see it used for navigation tabs on GitHub, pill-shaped tags on blog posts, and buttons that sit side-by-side.
Think of it this way: Think of photo frames on a shelf. Each frame has a fixed width and height (like a block element), but they sit next to each other on the shelf (like inline elements). If you add too many frames, they wrap to the next shelf — just like inline-block elements wrap to the next line.
Web Standard
inline-block was the go-to tool for horizontal layouts before flexbox existed. You'll still see it in older codebases and it remains useful for small UI elements like buttons, badges, and navigation pills.
Tip
Inline-block elements have a quirk: the browser adds a small space between them (about 4px) because it treats the whitespace in your HTML as a text space. This catches many beginners off guard. You'll notice it when elements don't quite fit where you expect.
Learn more on MDN