# list-style-position property

The `list-style-position` property sets how a list marker will be displayed: inside or outside the `ul` or `ol` list.

## Syntax

`selector { list-style-position: inside | outside; }`

## Values

Value | Description
--- | ---
`inside` | The marker is inside a list.
`outside` | The marker is outside a list.

Default value: `outside`.

## Example . The inside value

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `ul { list-style-position: inside; border: 1px solid red; width: 200px; padding-left: 0; margin-left: 10px; }`

:

## Example . The outside value

`<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>` `ul { list-style-position: outside; border: 1px solid red; width: 200px; padding-left: 0; margin-left: 10px; }`

:

## See also

- the `list-style-image` property
  that sets markers in the form of specified images
- the `list-style-type` property
  that specifies a type of list markers
- the `list-style` property
  that is shorthand for markers

← →
↑
en ru