List Padding: The "Gotcha"

A common pitfall is forgetting to add left padding (e.g., pl-5 ) to lists. Without it, the list markers (bullets or numbers) can sit flush against the left edge of their container, looking cramped or even overlapping with other elements or container borders.

Incorrect: List without pl-5

Below, the list uses list-disc but lacks pl-5 . Notice how the bullets are at the very edge of the bordered container.

Correct: List with pl-5

This list correctly uses list-disc and pl-5 . The bullets are nicely indented.

Incorrect: Numbered List without pl-5

  1. Step 1 (no pl-*) - Number is cramped.
  2. Step 2 (no pl-*) - Too close to the edge.

Correct: Numbered List with pl-5

  1. Step 1 (with pl-5) - Number is properly indented.
  2. Step 2 (with pl-5) - Correctly displayed.