CSS GUIDE LIST-STYLE-POSITION

Summary

The list-style-position property specifies the position of the marker box in the principal block box.

• Initial value: outside
• Applies to: elements with 'display: list-item'
• Inherited: yes
• Percentages: N/A
• Media: visual
• Computed value: as specified

Syntax

list-style-position: inside | outside | inherit

Legal Values

outside

• The marker box is outside the principal block box.

inside

• The marker box is the first inline box in the principal block box, after which the element's content flows.

Usage Examples

The code:

<ul>
  <li style="list-style-position: inside; border: 1px solid #000;">Border color helps to see the difference</li>
</ul>


<ul>
  <li style="list-style-position: outside; border: 1px solid #000;">Border color helps to see the difference</li>
</ul>

Rendering of above code:

• Border color helps to see the difference

• Border color helps to see the difference

Specification Conformance

• CSS 1
• CSS 2.1
• CSS 3

See Also

list-style, list-style-type, list-style-image