From Cramped to Clean: Mastering List Spacing in CSS

Web design uses lists extensively; examples include menus, to-do lists, feature blocks, and FAQs.

However, proper spacing of list items is often a challenge. When they are cramped, they look like a wall of text. Adding a little more space than appropriate and they feel disconnected.

Let’s walk through how you can control that sweet spot using two CSS properties: margin and line-height.

Margin: The go-to for vertical breathing room

When you want clear visual separation between each list item—especially in vertical lists—margin is the best solution.

(click on the image to open in a new tab)

That gives each <li> a little space underneath.

The result is a more relaxed, readable list. You can use margin-top too, but margin-bottom is often easier to manage consistently, especially when nesting lists or combining with headings.

You can even get more specific:

(click on the image to open in a new tab)

Line-height: Great for multi-line items

The role of the line-height is different.

It’s less about the space between list items and more about the vertical rhythm within them. If a single list item wraps across two or more lines, line-height controls how tight or loose those lines feel.

(click on the image to open in a new tab)

This won’t increase the gap between list items, but it makes the content inside each item easier to scan. Think of it as inner spacing, not outer.

Which should you use?

Use margin when you’re spacing items apart. Use line-height to improve how text flows within items. You’ll often want both. Together, they help you design lists that don’t just look nice.

A quick side note

If you’re building menus or buttons inside list items, spacing gets even trickier. You might need padding, flexbox, or even grid layout to balance icons, text, and hover zones. But for basic reading lists? margin and line-height usually do the trick.

Although my blog doesn’t support comments, feel free to reply via email or X.