CSS GUIDE LIST-STYLE-POSITION

From CDOT Wiki
Jump to: navigation, search

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.

Mozilla Recommended Values

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

Notes

Specification Conformance

Browser Compatibility

See Also

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