Revision 300059 of list-style-position

  • Revision slug: CSS/list-style-position
  • Revision title: list-style-position
  • Revision id: 300059
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The list-style-position CSS property specifies the position of the marker box in the principal block box. It is often more convenient to use the shortcut {{ cssxref("list-style") }}.

  • {{ Xref_cssinitial() }} outside
  • Applies to elements with display:list-item
  • {{ Xref_cssinherited() }} yes
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} 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

{{ CSSLiveSample("list-style") }}

  <ul>
    <li>Lorem ipsum <br> dolor sit amet <br> consectetuer</li>
    <li>sed diam nonummy <br> nibh euismod tincidunt <br> ut laoreet</li>
  </ul>

Result

  • Lorem ipsum
    dolor sit amet
    consectetuer
  • sed diam nonummy
    nibh euismod tincidunt
    ut laoreet

Specifications

Specification Status Comment
{{ SpecName('CSS3 Lists', '#list-style-position', 'list-style-position') }} {{ Spec2('CSS3 Lists') }} No change.
{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position') }} {{ Spec2('CSS2.1') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatNo() }} 4.0 3.5 10. (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Firefox does not support list-style-position:inside and hasn't since 2000 (Source)

See also

  • {{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>list-style-position</code> CSS property specifies the position of the marker box in the principal block box. It is often more convenient to use the shortcut {{ cssxref("list-style") }}.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>outside</code></li>
  <li><dfn>Applies to</dfn> elements with <code>display:list-item</code></li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre>
list-style-position:  inside | outside | inherit</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    outside</dt>
  <dd>
    The marker box is outside the principal block box.</dd>
  <dt>
    inside</dt>
  <dd>
    The marker box is the first inline box in the principal block box, after which the element's content flows.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>{{ CSSLiveSample("list-style") }}</p>
<pre>
  &lt;ul&gt;
    &lt;li&gt;Lorem ipsum &lt;br&gt; dolor sit amet &lt;br&gt; consectetuer&lt;/li&gt;
    &lt;li&gt;sed diam nonummy &lt;br&gt; nibh euismod tincidunt &lt;br&gt; ut laoreet&lt;/li&gt;
  &lt;/ul&gt;
</pre>
<h3 id="Result">Result</h3>
<ul style="list-style:square;">
  <li>Lorem ipsum<br />
    dolor sit amet<br />
    consectetuer</li>
  <li>sed diam nonummy<br />
    nibh euismod tincidunt<br />
    ut laoreet</li>
</ul>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Lists', '#list-style-position', 'list-style-position') }}</td>
      <td>{{ Spec2('CSS3 Lists') }}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatNo() }}</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>10. (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Firefox does not support <code>list-style-position:inside</code> and hasn't since 2000 (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=36854" title="https://bugzilla.mozilla.org/show_bug.cgi?id=36854">Source</a>)</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}</li>
</ul>
<!-- languages({ "es": "es/docs/CSS/list-style-position", "fr": "fr/docs/CSS/list-style-position", "ja": "ja/docs/CSS/list-style-position", "pl": "pl/docs/CSS/list-style-position"}) -->
Revert to this revision