Home > Article > Web Front-end > How to create spacing between list bullets and text in HTML?
How to create spacing between list bullets and text in HTML?
- 王林forward
- 2023-09-18 10:57:011516browse
We use the CSS padding-left property to create a space between the bullet and the text. It is used to set the padding area on the left side of the element.
HTML supports ordered lists and unordered lists, and HTML supports ordered lists and unordered lists. We must use the tag to create an unordered list in HTML.
tag defines an unordered list. We start the project list with the tag.
For ordered lists, we must use the tag to create an unordered list in HTML. The
- tag defines an ordered list. We start listing items using the tag.
grammar
The following is the syntax to create a space between a list bullet and HTML text.
padding-left: value in pixels;
Example 1
The following is an example of creating a list in HTML to add spacing between bullets and text.
<!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>
The following is the output of the above example program.
Example 2
Another example of creating spaces 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>
The above is the detailed content of How to create spacing between list bullets and text in HTML?. For more information, please follow other related articles on the PHP Chinese website!