- 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 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>
- Related Articles
- How to create an unordered list without bullets in HTML?
- How to create an unordered list with disc bullets in HTML?
- How to create an unordered list with circle bullets in HTML?
- How to create an unordered list with square bullets in HTML?
- How to create an unordered list with image bullets in HTML?
- How to create an unordered list without bullets using CSS?
- Create a bordered list without bullets using CSS
- How to create teletype text in HTML?
- How to add space between characters in Text using FabricJS?
- Create a white space in HTML
- How to Create a Multi-line Text Input (Text Area) In HTML?
- How to set the space between characters in a text with JavaScript?
- How to create an ordered list in HTML?
- Create small text in HTML
- Create strong text in HTML
