list-style-position property
Sets or retrieves a variable that indicates how the list-item marker is drawn relative to the content of the object.
  |
Syntax
list-style-position: inside | outside
Property values
outside-
Default. Marker is placed outside the text, and any wrapping text is not aligned under the marker.
inside-
Marker is placed inside the text, and any wrapping text is aligned under the marker.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value |
Standards information
- CSS 2.1, Section 5.6.5
Remarks
The list-style-position property can be applied to any element when margin and display:list-item are applied. The display:list-item property is available starting with Microsoft Internet Explorer 6.
If the left margin of a list item is set to 0 using one of the margin properties, the list-item markers do not show. The margin should be set to a minimum of 30 points.
Examples
The following examples use the list-style-position attribute and the list-style-position property to set the position for markers.
This example uses ul and UL.compact as selectors in an embedded (global) style sheet to set the position of the list-item markers.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/list-style-position.htm
<!DOCTYPE html>
<html>
<head>
<title>list-style-position</title>
<style>
ul {
list-style-position: inside;
}
.compact {
list-style-position: outside;
}
</style>
</head>
<body>
<p>The top list has <strong>list-style-position</strong> set to "inside"; the bottom list to "outside".</p>
<ul>
<li>first list item comes first</li>
<li>second list item comes second</li>
</ul>
<ul class="compact">
<li>first list item comes first</li>
<li>second list item comes second</li>
</ul>
</body>
</html>
This example uses inline scripting to change the marker position when an onmouseover event occurs.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStylePosition.htm
<!DOCTYPE html>
<html>
<head>
<title>listStylePosition</title>
</head>
<body>
<p>
Run your mouse over the unordered lists (<strong>UL</strong>) to see the
<strong>listStylePosition</strong> property set to "inside".
The <strong>mouseout</strong> sets the property to "outside".
</p>
<!-- IN-LINE SCRIPTING -->
<div onmouseover="this.style.listStylePosition='inside'"
onmouseout="this.style.listStylePosition='outside'">
<ul>
<li>first list item comes first</li>
<li>second list item comes second</li>
</ul>
<ul>
<li>first list item comes first</li>
<li>second list item comes second</li>
</ul>
</div>
</body>
</html>
See also