The list-style-position property defines the list marker box horizontal position in regards to the containing principal box.

The list-style-position property contains following information:

  1. value: inside, outside or inherit;
  2. initial: outside;
  3. applies to: list elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

The outside is default value and it places the marker box outside the container while the inside value places the marker box as the first inline box within the list container. Overall the outside value moves the listed items to the right while the inside pushes them inward to the left (similar to text-indent property).

Example

CSS list-style-position property example:

 

›› go to examples ››