CSS list-style-position – specify if list markers will be outside or inside

CSS list-style-position property specifies the position of the marker box with respect to the principal block box.

  • outside: The marker box is outside the principal block box. This usually results in more indentation by default. But with margin property, it can be reduced.
    list-style-position-outside
  • inside: The marker box is placed as the first inline box in the principal block box.
    list-style-position-inside

CSS property list-style-position

CSS version: CSS 2.1
Value: inside | outside | inherit
Initial: outside
Applies to: elements with 'display: list-item'
Inherited: yes

Example – list-style-position outside

If no value specified for element and its parent, list-style-position takes initial value outside.

<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-position: outside; /* default */
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
refresh

Example – list-style-position inside

<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-position: inside;
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments