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:
html
<!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:
Supported Browsers: The browser supported by list-style-position property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above
Please Login to comment...