How to create space between list bullets and text in HTML?
To create space between list bullets and text in HTML, use CSS padding property. Left padding padding-left is to be added to <ul> tag list item i.e. <li> tag. Through this, padding gets added, which will create space between list bullets and text in HTML.
Example
We have the following unordered list with disc bullets
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h1>Developed Countries</h1>
<p>The list of developed countries:</p>
<ul style="list-style-type:disc">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</body>
</html>
Example
You can try to run the following code to add space between list bullets and text in HTML. We are using the same code above and will add left padding to it for spacing
Live Demo
<!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>
Published on 01-Feb-2018 12:08:16
