- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to indicate whether the marker should appear inside or outside of the box containing the bullet points with CSS?
The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one the two values
Value | Description |
---|---|
none | NA |
inside | If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside. |
outside | If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet). |
Example
You can try to run the following code to implement list-style-position property
<html> <head> </head> <body> <ul style = "list-style-type:circle; list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ul> <ul style = "list-style-type:square;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ul> <ol style = "list-style-type:decimal;list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ol> <ol style = "list-style-type:lower-alpha;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ol> </body> </html>
- Related Articles
- Set marker outside of the box containing the bullet points with CSS
- Set marker inside of the box containing the bullet points with CSS
- How to control the shape or appearance of the marker with CSS?
- Set whether a punctuation character may be placed outside the line box with CSS
- Change Bullet Color for Lists with ::marker CSS Selector
- Specify whether the flex items should wrap or not with CSS
- Set the distance between the marker and the text relating to that marker with CSS
- Fill in the blanks:All points lying inside / outside a circle are called …….. points / ………. points.
- How to Create a Comment Box with a Containing Text Using CSS
- How to dismiss the dialog with the click on outside of the dialog box in android?
- A cubical box with lid has a length of 30cm. Find the cost of painting the inside and outside of the box at Rs 5.50 per square metre.
- Set whether the text should be overridden to support multiple languages with CSS
- A bullet hits a Sand box with a velocity of $20 m/s$ and penetrates it up to a distance of $6 cm$. Find the deceleration of the bullet in the sand box.
- Why does the bottom of a tank or a pond containing water appear to be raised?
- What to do with content that renders outside the element box with JavaScript?

Advertisements