list-style-position

  • Revision slug: CSS/list-style-position
  • Revision title: list-style-position
  • Revision id: 343003
  • Created:
  • Creator: hydrurga
  • Is current revision? No
  • Comment Clarification of the issue

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")}}

.one {
  list-style:url(starsolid.gif) inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url(starsolid.gif);
  list-style-position: none;
}

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 1.0 (1.0) 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

N.B. There is variance among browsers regarding behaviour when a block element is placed first within a list element declared as list-style-position:inside. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see this Mozilla Bug report and an example.

See also

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

Revision Source

<div>
  {{CSSRef}}</div>
<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 class="syntaxbox">
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 class="brush:css;">
.one {
  list-style:url(starsolid.gif) inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url(starsolid.gif);
  list-style-position: none;
}</pre>
<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>1.0 (1.0)</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>1.0 (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>N.B. There is variance among browsers regarding behaviour when a block element is placed first within a list element declared as <code>list-style-position:inside</code>. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see this <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=36854" title="https://bugzilla.mozilla.org/show_bug.cgi?id=36854">Mozilla Bug</a> report and an <a href="http://jsfiddle.net/hydrurga/MAS7j/" title="http://jsfiddle.net/hydrurga/MAS7j/">example</a>.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}</li>
</ul>
Revert to this revision