1
edit
Changes
no edit summary
== 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 ==
<pre>
list-style-position: inside | outside | inherit
</pre>
== 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:
<pre>
<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>
</pre>
Rendering of above 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>
== Notes ==
== Specification Conformance ==
* [http://www.w3.org/TR/CSS1#list-style-position CSS 1]
* [http://www.w3.org/TR/CSS21/generate.html#lists CSS 2.1]
* [http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-style-position CSS 3]
== Browser Compatibility ==
== See Also ==
[[CSS_GUIDE_LIST-STYLE|list-style]], [[CSS_GUIDE_LIST_STYLE_TYPE|list-style-type]], [[CSS_GUIDE_LIST-STYLE-IMAGE|list-style-image]]
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 ==
<pre>
list-style-position: inside | outside | inherit
</pre>
== 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:
<pre>
<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>
</pre>
Rendering of above 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>
== Notes ==
== Specification Conformance ==
* [http://www.w3.org/TR/CSS1#list-style-position CSS 1]
* [http://www.w3.org/TR/CSS21/generate.html#lists CSS 2.1]
* [http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-style-position CSS 3]
== Browser Compatibility ==
== See Also ==
[[CSS_GUIDE_LIST-STYLE|list-style]], [[CSS_GUIDE_LIST_STYLE_TYPE|list-style-type]], [[CSS_GUIDE_LIST-STYLE-IMAGE|list-style-image]]
