Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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 create space between list bullets and text in HTML?
We use CSS padding-left property, to create a space between bullets and the text. It is used to set the padding area on the left of an element.
HTML support ordered list, unordered list and HTML support ordered list, unordered list and we must use the <ul> tag, to create unordered list in HTML. The <ul> tag defines the unordered list. We use <li> tag to start list of items.
And for ordered list we must use the <ol> tag, to create unordered list in HTML. The <ol> tag defines the ordered list. We use <li> tag to start list of items.
Syntax
Following is the syntax to create space between list bullets and the text in HTML.
padding-left: value in pixels;
Example 1
Following is the example to create space between list bullets and the text in HTML.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul > <li style="padding-left: 30px">Abdul</li> <li style="padding-left: 30px">Jason</li> <li style="padding-left: 30px">Yadav</li> </ul> </body> </html>
Following is the output for the above example program.
Example 2
Another example to create space between list bullets and text in HTML −
<!DOCTYPE html> <html> <head> <title>HTML Lists</title> </head> <body> <h1>Developed Countries</h1> <p>The list of developed countries:</p> <ul style="list-style-type:disc"> <li style="padding-left:1em">US</li> <li>Australia</li> <li>New Zealand</li> </ul> </body> </html>
22K+ Views
