list-style-position: Inside and Outside Markers on Wrapped Items

CSS Reference

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

CSS / Reference / background-repeat: Tiling, Space, and Round

Control horizontal and vertical background tiling and compare repeat, no-repeat, space, and round with the same tile and positioning area.

CSS / Reference / box-shadow: Offsets, Blur, Spread, and Inset Shadows

Build box shadows from offsets, blur, and spread, then inspect clipping and layering. Distinguish box geometry from glyph or transparent-image shadows.

CSS / Reference / border-spacing: Separate Cell Gaps and Collapsed Borders

Set horizontal and vertical gaps in separate-border tables. Distinguish cell padding, zero spacing, collapsed borders, and browser default styles.

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 / 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 / font-family: Font Lists, Glyph Fallback, and Loading

Build a font stack with appropriate generic fallbacks and inspect the fonts actually used. Distinguish naming a family from loading files and covering characters.

CSS / Reference / background-origin: Positioning References Versus Painting Boundaries

Choose a background image’s positioning box and distinguish it from background-clip. Compare how padding, borders, percentage sizes, and fixed attachment affect the reference.

CSS / Reference / white-space: Preserve Spaces, Line Breaks, and Wrapping

Choose whitespace behavior by preservation and wrapping needs. Compare traditional values and break-spaces, and handle long words with separate wrapping properties.

CSS / Reference / list-style-type: Change List Markers and Numbering

Style list markers while keeping ordered and unordered semantics. Compare numbering styles, starting values, marker removal, and shorthand resets.

CSS / Reference / line-height: Unitless Ratios, Inherited Lengths, and Line Boxes

Choose scalable line-height values and compare ratio inheritance with fixed lengths. Separate line boxes from paragraph margins and test larger child text.