Skip to content
Related Articles

Related Articles

Improve Article

CSS | list-style-position Property

  • Last Updated : 09 Aug, 2019

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:




<!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>

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :