list-style-position - HTML CSS CSS Property

HTML CSS examples for CSS Property:list-style-position

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. list-style-position

Description

The list-style-position CSS property sets the position of list-item marker with respect to the list item's block box.

The following table summarizes the list-style-position Property.

Item Value
Default value: outside
Applies to:List items
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows: 


list-style-position:     inside | outside | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
inside marker is placed as the first inline box in the principal block box, before the element's content.
outside marker is placed outside the principal block box. This is default.
initial Sets this property to its default value.
inherit take the value of its parent element list-style-position property.

The example below shows the list-style-position property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of list-style-position Property</title>
  <style type="text/css">
    ol {<!--from w w w .  j  a  v  a 2 s  . com-->
        list-style-position: inside;
    }
    ul {
        list-style-position: outside;
    }
  ol li, ul li{
        background: #d8bfd8;
    }
</style>
 </head>
 <body>
  <h2>List Marker Positioned Inside</h2>
  <ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ol>
  <h2>List Marker Positioned Outside</h2>
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </body>
</html>

Related Tutorials