CSS List-Style-Position Property

In this chapter you will learn:
About list-style-position property
Values of this property
Example of this property
List-style-position property is used to specify the list style (bullet) inside or outside of content. It helps to positioning the bullet of list.
Values of this property-
Values Description
inside Bullet appears inside the content
outside Bullet appears outside of content
initial Specify the default list-style-type value
inherit Inherited from parent property

Example of this property- 
<html>
<head>
    <title>Example of list-style-position property</title>
    <style type="text/css">
    #a
    {
    list-style-position:inside;
    }
    #b
    {
      list-style-position:outside;
    }
    </style>
    </head>
<body>
<ul id="a">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul><hr/>
<ul id="b">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>

Guide:-
If you will run the given program then you will get that bullets of the list are positioned in different spaces due to list-style-position property.
Output:-
example of list-style-position

Summary

In this chapter, you have learned about the list-style-position property. Some other properties of CSS are given in next chapter so click on Next button to continue-

 

Share your thought