Two lists that look almost identical in the raw Markdown source can render with noticeably different spacing on the page. The difference usually comes down to a single blank line between items, something the list guide in this series doesn’t cover. This article explains the loose-vs-tight distinction, why it exists, and how to control it deliberately instead of running into it by accident.
Key Takeaways
- A 'tight' list has no blank lines between items; a 'loose' list has at least one blank line between two items.
- Tight list item content renders without wrapping <p> tags; loose list item content gets wrapped in <p> tags.
- A loose list adds visible vertical spacing between items compared to a tight list.
- Adding just one blank line anywhere in a list is enough to make the entire list loose.
What Is a Tight List?
A tight list has no blank lines separating its items. Content inside each item renders directly, without being wrapped in paragraph tags.
- First item
- Second item
- Third itemThis renders compactly:
- First item
- Second item
- Third item
The HTML output has no <p> tags inside the list items:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>What Is a Loose List?
A loose list has at least one blank line between two of its items. This changes how every item in that list renders, not just the ones next to the blank line.
- First item
- Second item
- Third itemThis renders with visible spacing between items:
-
First item
-
Second item
-
Third item
The HTML output wraps each item’s content in <p> tags:
<ul>
<li><p>First item</p></li>
<li><p>Second item</p></li>
<li><p>Third item</p></li>
</ul>CommonMark determines looseness for the entire list block, not per item. If even one pair of adjacent items has a blank line between them, every item in that list gets the loose <p>-wrapped treatment, even the items that don’t have blank lines next to them.
Why Does This Matter in Practice?
The most common real-world surprise is writing a list where you added blank lines purely for readability in the source file, not realizing it would add visible spacing to the rendered page. If a tightly-packed list suddenly looks like it has extra gaps between items, check for a stray blank line.
- Setup local environment
- Install dependencies
- Run dev serverBecause of the blank line before the third item, this entire list renders loose, spacing out all three items even though only one gap was added in the source.
How Do I Force a List to Stay Tight?
Remove every blank line between items. If you need a paragraph of explanation inside one item without affecting the others, indent it under that item instead of leaving a blank line before the next list marker.
- First item
- Second item, with an explanatory paragraph.
This paragraph is part of the second item, not a new loose gap,
because there's no blank line directly between two list markers.
- Third itemA blank line is required to start a paragraph nested inside a list item (as shown above), and that alone doesn’t make the outer list loose. What makes a list loose is a blank line sitting directly between two sibling list markers.
Summary Checklist
- No blank lines between items keeps a list tight, rendering without
<p>wrapping. - Even one blank line between two items makes the entire list loose.
- Looseness applies list-wide, not just to the items next to the blank line.
- Loose lists add visible vertical spacing compared to tight lists.
- A blank line before a nested paragraph inside one item doesn’t by itself make the list loose.
Frequently Asked Questions
Does this apply to both ordered and unordered lists?
Yes. The tight/loose distinction is a property of list blocks in general, and applies the same way regardless of whether the markers are -, *, +, or numbers.
Can I mix tight and loose sections in the same document?
Yes, as separate lists. Two lists separated by a non-list paragraph or heading are independent blocks, so one can be tight and the other loose without affecting each other.
Does looseness change how task list checkboxes render?
Not usually. GFM task list checkboxes render the same either way; looseness mainly affects whether the text content is wrapped in a paragraph tag, not the checkbox itself.
What to Read Next
- Markdown List Guide: Ordered and Unordered Lists — Review the base list syntax this article builds on.
- Horizontal Rules & Line Breaks in Markdown — Learn another case where blank lines and spacing change how content is parsed.
Related Articles
Deepen your understanding with these curated continuations.
Autolinks in Markdown: Bare URLs and Emails
Learn the difference between CommonMark's angle-bracket autolinks and GitHub-Flavored Markdown's extended autolinks for bare URLs and email addresses.
Definition Lists in Markdown
Learn the Markdown Extra-style definition list syntax for terms and descriptions, useful for glossaries and API documentation, plus which tooling supports it.
Escaping Special Characters in Markdown
Learn how to escape asterisks, underscores, brackets, and other special characters in Markdown so they display as literal text instead of triggering formatting.
