CSS: list-style-position property
This CSS tutorial explains how to use the CSS property called list-style-position with syntax and examples.
Description
The CSS list-style-position property defines the position of a list item marker in the principal block box.
Syntax
The syntax for the list-style-position CSS property is:
list-style-position: value;
Parameters or Arguments
- value
The appearance of a list item element. It can be one of the following:
Value Description inside The marker box is inside of the principal block box
ul { list-style-position: inside; }outside The marker box is outside of the principal block box (this is the default)
ul { list-style-position: outside; }inherit Element will inherit the list-style-position from its parent element
ol { list-style-position: inherit; }
Note
- The list-style-position property can be applied to <ol>, <ul> or <li> tags.
- The list-style-position applies to elements with display: list-item.
- If the list-style-position property is not specified, the default is outside.
- See also the list-style, list-style-image, and list-style-type properties.
Browser Compatibility
The CSS list-style-position property has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
Example
We will discuss the list-style-position property below, exploring examples of how to use this property in CSS.
Outside
Let's look at a CSS list-style-position example where we set the list-style-position to outside.
The HTML would look like this:
<ol>
<li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li>
<li>CheckYourMath.com has answers to your every day Math questions.</li>
<li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li>
</ol>
The CSS would look like this:
ol { list-style-position: outside; background: lightgreen; }
The ordered list would look like this:
In this CSS list-style-position example, we have set the list-style-position to outside. This results in the list item markers (ie: numbering) to appear less indented and when the list item text wraps, the text continues to remain more indented than the numbering.
Inside
Next, let's look at a CSS list-style-position example where we set the list-style-position to inside.
The HTML would look like this:
<ol>
<li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li>
<li>CheckYourMath.com has answers to your every day Math questions.</li>
<li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li>
</ol>
The CSS would look like this:
ol { list-style-position: inside; background: lightgreen; }
The ordered list would look like this:
In this CSS list-style-position example, we have set the list-style-position to inside. This results in the list item markers (ie: numbering) to appear more indented and when the list item text wraps, the wrapped text lines up with the numbering.
Advertisements