CSS / Reference / list-style-position: Inside and Outside Markers on Wrapped Items
list-style-position places a marker outside or inside the list item’s content. Outside generally aligns wrapped text cleanly; inside treats the marker like inline content at the first line’s start.
Syntax and value choices
| Property | Initial value | Inherited | Main application conditions |
|---|---|---|---|
list-style-position |
outside | Yes | Elements generating list-item boxes |
Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.
ul { list-style-position: outside; padding-inline-start: 1.5em; }
| Value or category | Behavior and choice |
|---|---|
outside |
Place the marker outside the principal item content. |
inside |
Place the marker inside the first line. |
padding-inline-start |
Reserve start-side space for outside markers. |
list-style-type |
Choose the marker shape independently. |
For supported values and conditions, see MDN list-style-position.
Run the example and compare results
Save this complete code as css-reference-10644-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>list-style-position comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 220px; padding-inline-start: 28px; border: 1px solid #718096; }
.target { list-style-position: outside; }
.reference { list-style-position: inside; }
</style>
</head>
<body>
<main id="demo">
<h1>list-style-position comparison</h1>
<section class="samples"><div><p class="label">outside</p><ul class="target"><li>Wrap this long list item and compare the start of its second line with the first.</li></ul></div><div><p class="label">inside</p><ul class="reference"><li>Wrap this long list item and compare the start of its second line with the first.</li></ul></div></section>
</main>
</body>
</html>
Outside aligns the text lines after the marker. Inside puts the marker into the first line, changing its relationship to later line starts.
Outside markers and clipping
Removing all start-side padding or clipping an ancestor can hide outside markers. Reserve useful space before switching to inside purely to make a missing marker reappear.
A block as the first child
An inside item whose first child is a paragraph can place the marker and text on different lines. Compare the actual HTML structure and long content. Marker position does not change whether the list is ordered.
Change one setting at a time
Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.
- Wrap the original li text in p and compare a block first child under inside and outside. Keep content and width the same, then remove the wrapper.
- Temporarily remove start padding to inspect an outside marker, then restore appropriate space. Also inspect marker type and ancestor overflow if it seems absent.
For display modes and normal flow, see CSS display: Block, Inline, inline-block, and Hiding. Related properties to compare alongside these conditions are list-style-type.
When the result is missing or unexpected
- Inspect padding and ancestor overflow if only the marker disappears.
- Inspect the item’s first child if its first line is unexpectedly placed.
CSS / Reference / content: Generate Pseudo-Element Text and Decoration
Generate strings, attribute labels, counters, and decorative pseudo-elements. Compare none with an empty string and retain important information in real HTML.
CSS / Reference / background-attachment: Viewport, Box, and Internal Scroll Attachment
Compare local and scroll backgrounds inside a scrolling box and distinguish them from viewport-fixed backgrounds. Test target-browser behavior and a usable fallback.
CSS / Reference / background-color: Background Alpha, Inheritance, and Contrast
Set a background or a partly transparent color without fading the text. Distinguish transparency from inheritance and provide readable image fallbacks.
CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing
Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.
CSS / Reference / opacity: Group Transparency, Background Alpha, and Interaction
Fade an element and its children or make only its background translucent. Check stacking, contrast, keyboard focus, and the difference between transparency and hiding.
CSS / Reference / font-weight: Numeric Weights, Relative Weights, and Font Matching
Request numeric or relative font weights and inspect the supplied faces. Compare static and variable-font behavior without assuming every number produces a unique weight.
CSS / Reference / background-position: Percentages, Centers, and Edge Offsets
Position backgrounds using centers, percentages, or edge offsets. Calculate percentages from the remaining space and account for oversized cover images and multiple layers.
CSS / Reference / clip: Understand Legacy Clip and Migrate to Clip-Path
Read legacy rect coordinates and compare them with clip-path inset distances. Keep layout sizing and clipping separate when migrating existing CSS.
CSS / Reference / caption-side: Place a Table Caption Above or Below
Place captions visually while keeping them first in the table’s source structure. Match caption text to the data and check alignment, width, and writing direction.
CSS / Reference / background-size: Cover, Contain, and Background Sizing
Compare background cover and contain using a known image ratio. Account for positioning areas, percentages, cropping, repeated tiles, and the element’s own size.