list-style-position
Try it
Syntax
css
/* Keyword values */
list-style-position: inside;
list-style-position: outside;
/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
The list-style-position
property is specified as one of the keyword values listed below.
Values
Description
This property is applied to list items, i.e., elements with
. By default this includes display
: list-item;<li>
elements. Because this property is inherited, it can be set on the parent element (normally <ol>
or <ul>
) to let it apply to all list items.
If a block element is the first child of a list element declared as list-style-position: inside
, then the block element is placed on the line after the marker-box.
It is often more convenient to use the shorthand list-style
.
Formal definition
Initial value | outside |
---|---|
Applies to | list items |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
list-style-position =
inside |
outside
Examples
Setting list item position
HTML
html
<ul class="inside">
List 1
<li>List Item 1-1</li>
<li>List Item 1-2</li>
<li>List Item 1-3</li>
<li>List Item 1-4</li>
</ul>
<ul class="outside">
List 2
<li>List Item 2-1</li>
<li>List Item 2-2</li>
<li>List Item 2-3</li>
<li>List Item 2-4</li>
</ul>
<ul class="inside-img">
List 3
<li>List Item 3-1</li>
<li>List Item 3-2</li>
<li>List Item 3-3</li>
<li>List Item 3-4</li>
</ul>
CSS
css
.inside {
list-style-position: inside;
list-style-type: square;
}
.outside {
list-style-position: outside;
list-style-type: circle;
}
.inside-img {
list-style-position: inside;
list-style-image: url("starsolid.gif");
}
Result
Specifications
Specification |
---|
CSS Lists and Counters Module Level 3 # list-style-position-property |
Browser compatibility
BCD tables only load in the browser