mozilla

Revision 15270 of list-style-position

  • Revision slug: CSS/list-style-position
  • Revision title: list-style-position
  • Revision id: 15270
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment /* Values */ values are backwards

Revision Content

{{template.CSSRef()}}

Summary

list-style-position 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

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.

Examples

ul {
    list-style-position: inside;
}

Specifications

Browser Compatibility

See Also

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

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>list-style-position</code> specifies the position of the marker box in the principal block box.
</p>
<ul><li> Initial value: outside
</li><li> Applies to: elements with 'display: list-item'
</li><li> Inherited: yes
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">visual</a>
</li><li> Computed value: as specified
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">list-style-position: inside | outside | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> <code>outside</code> </dt><dd> The marker box is outside the principal block box.
</dd><dt> <code>inside</code> </dt><dd> The marker box is the first inline box in the principal block box, after which the element's content flows.
</dd></dl>
<h3 name="Examples"> Examples </h3>
<pre>ul {
    list-style-position: inside;
}
</pre>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#list-style-position">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#lists">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-style-position">CSS 3</a>
</li></ul>
<h3 name="Browser_Compatibility"> Browser Compatibility </h3>
<h3 name="See_Also"> See Also </h3>
<p><a href="en/CSS/list-style-position">list-style-position</a>, <a href="en/CSS/list-style">list-style</a>, <a href="en/CSS/list-style-type">list-style-type</a>, <a href="en/CSS/list-style-image">list-style-image</a>
</p>
Revert to this revision