CSS | list-style-position Property

The list-style-position property in CSS specifies the position of the marker box with respect to the principal block box.

Syntax:

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

Property values:



  • outside: In this value the marker is outside the principal block box i.e the bullet points will be outside the list item. This is the default value.
  • inside: In this value the marker is the first element among the list item’s contents i.e the bullet points will be inside the list item.
  • initial: This mode sets this property to its default value.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>CSS list-style-position Property</title>
        <style>
        .geek1 {
          list-style-position: outside;
        }
        .geek2 {
          list-style-position: inside;
        }
        </style>
    </head>
    <body>
    <h1 style = "text-align: center; color: green">
        CSS list-style-position Property
    </h1>
      
    <h3>list-style-position: outside;</h3>
    <ul class="geek1">
      <li>Bubble Sort </li>
      <li>Merge Sort</li>
      <li>Insertion Sort</li>
    </ul>
      
    <h3>list-style-position: inside;</h3>
    <ul class="geek2">
      <li>Bubble Sort </li>
      <li>Merge Sort</li>
      <li>Insertion Sort</li>
    </ul>
    </body>
</html>

chevron_right


Output:
liststyleposition

Supported Browsers: The browser supported by list-style-position property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 7.0
  • Apple Safari 1.0


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.