How to create space between list bullets and text in HTML ?
The approach of this article is to create a space between bullets and the text using CSS. This task can be done by using the CSS padding-left property. It is used to set the width of the padding area on the left of an element.
Syntax:
padding-left: length|percentage|initial|inherit;
Example:
HTML
<!DOCTYPE html> < html > < head > < style > li { padding-left: 23px; } </ style > </ head > < body > < h1 style="color:green; text-align:center"> w3wiki </ h1 > < h2 style = "text-align:center" > How to create space between list bullets and text in HTML? </ h2 > <!-- padding-left property used here --> < p >< b >list of fruits</ b ></ p > < ul > < li >Mango</ li > < li >Apple</ li > < li >Banana</ li > < li >Grapes</ li > < li >Potatto</ li > </ ul > </ body > </ html > |
Output:
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera