Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To remove a list’s default spacing, reset its margins and padding. Padding is often the part that margin-left: 0 misses. If you want to keep bullets or numbers, retain enough start padding for them; if you want a markerless list, also set list-style: none.
Quick CSS recipes
Remove outer spacing while keeping conventional bullets or numbers:
.flush-list {
margin: 0;
padding-inline-start: 1.25rem;
list-style-position: outside;
}The list container has no margin, while the start padding reserves room for its marker. This keeps wrapped lines aligned with the item text.
Free tools Windows power users keep installed
One-click scans. No signup required.
Remove spacing and markers:
.reset-list {
margin: 0;
padding: 0;
list-style: none;
}Use a class like reset-list when only one component—such as a navigation menu or card list—should lose its markers. A broad global reset can flatten ordinary and nested content lists.
#1 Best Overall
Why does margin-left: 0 leave an indent?
A list’s apparent indentation can come from more than one CSS property. Its margin positions the list element relative to its parent; its padding creates space inside the element. Browsers commonly give lists start padding—often around 40px—so that bullets and numbers have room. The exact user-agent styles can vary. MDN explains the role of list indentation and padding.
This rule may therefore leave a gap:
ul,
ol {
margin-left: 0;
}It removes a margin on the left in a left-to-right layout, but any start padding can remain. For a complete reset, use:
ul,
ol {
margin: 0;
padding: 0;
}That removes padding on every side. If you only need to remove the list’s start indent while leaving other padding alone, use the logical property:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #2
ul,
ol {
margin-block: 0;
margin-inline: 0;
padding-inline-start: 0;
}padding-inline-start targets the start side of the text flow. It is more adaptable to right-to-left languages and alternate writing modes than padding-left. The physical property is still suitable when a component is specifically limited to a left-to-right layout.
Remove indentation but keep bullets or numbers
“Flush” can mean the list’s outer edge aligns with nearby content, not that the text starts at the same point as the surrounding paragraph. With the default outside marker, the bullet or number sits beside the item text, and the list needs some start padding to make room for it:
.article-list {
margin: 0;
padding-inline-start: 1.25rem;
list-style-position: outside;
}Adjust 1.25rem to fit your design and font size. If you reduce the padding to zero but retain an outside marker, the marker may extend beyond the visible list box. An ancestor with overflow: hidden can clip it.
When should you use list-style-position: inside?
inside places the marker at the beginning of the list item’s content flow:
.compact-list {
margin: 0;
padding: 0;
list-style-position: inside;
}This can make the first line appear flush without a separate hanging-marker column. It can work for short labels or compact, single-line items. For longer items, wrapped text may align less neatly than it does with an outside marker. The MDN reference for list-style-position describes the distinction. Treat inside as a different layout choice, not a universal fix for list indentation.
Make a markerless list or navigation menu
If the design calls for no bullets or numbers, reset the list’s spacing and marker style together:
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
margin: 0;
padding: 0;
list-style: none;
}For example, keep the navigation’s list structure in the HTML:
<nav aria-label="Primary">
<ul class="nav-list">
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Flexbox controls the horizontal arrangement; gap controls the space between links. Removing visual markers does not mean you need to replace a meaningful list with generic <div> elements. Keep <ul> for items without a meaningful sequence, <ol> when order matters, and <li> for each item. See W3C guidance on using HTML list elements.
Some design-system guidance notes that marker-removal techniques may affect how list semantics are exposed in particular browser and assistive-technology combinations. If accessibility testing identifies an issue, investigate a component-specific solution rather than adding roles indiscriminately. The W3C Design System list guidance includes practical examples and cautions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Preserve nested-list hierarchy
A global rule such as ul, ol { margin: 0; padding: 0; list-style: none; } changes every list, including lists nested in articles. That can make the structure of prose lists harder to scan. Scope resets to the component that needs them, and style nested content deliberately:
.card-list {
margin: 0;
padding: 0;
list-style: none;
}
.article-list {
margin-block: 1rem;
padding-inline-start: 1.25rem;
}
.article-list ul,
.article-list ol {
margin-block: 0.5rem;
padding-inline-start: 1.25rem;
}Choose selectors that match your HTML structure; the key is not to apply a component’s markerless treatment to unrelated lists.
Troubleshoot a list that still looks wrong
- Inspect the list in DevTools. Check computed
margin-block-start,margin-block-end,margin-inline-start,padding-inline-start,list-style-type, andlist-style-position. - Apply a temporary reset. Try
margin: 0; padding: 0;to find out whether spacing comes from the list’s box. Then restore marker space if bullets or numbers should remain. - Check for marker suppression. A reset or framework may set
list-style: noneorlist-style-type: none. To restore ordinary markers, uselist-style-type: discfor an unordered list ordecimalfor an ordered list. - Check clipping and overrides. An ancestor’s
overflow: hidden, another rule with greater specificity, source order, or cascade layers can affect the result. A marker can also extend outside the visible box when there is no space reserved for it. - Test realistic content. Check a long item that wraps, a nested list, and (if the component is internationalized) a right-to-left context. A reset that looks fine on short labels may fail for longer content.
For a concise reference: keep markers with margin: 0 and sensible padding-inline-start; remove markers with list-style: none; use inside only if its wrapping behavior suits the design.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
