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 Control the Space between Bullets and <li> Elements?
A list is a collection of short pieces of related information that can be used to display data or information on web pages in either an ordered or unordered format. HTML Lists are used to specify informational lists. All lists can have one or more list elements. There are three kinds of HTML lists:
Ordered or numbered list (ol): This will list items using schemes of numbers.
Unordered or Bulleted List (ul): This will list items using plain bullets.
List of Definitions or List of Descriptions (dl): This will arrange items in the dictionary format.
We can make HTML bullet points by creating an unordered list in HTML. An unordered list in HTML, also known as a bullet list in HTML, is a common type of HTML list. Unlike an ordered list, you use bullet lists in HTML to list items that do not need to be listed in order.
Creating HTML Bullet Points in an Unordered List
To create HTML bullet points in an unordered list, we must use two different tags. To begin, we must wrap the text in the <ul>...</ul> tags to create a bulleted list. Secondly, we have to surround each line item in the list with the <li>...</li> tags. When creating HTML bullet points, we have three formatting options to choose from.
We have the option of making circles, squares, or discs. Discs are the default option. The STYLE attribute is used to specify the style of bullets. Then we have to set its value to "list-style-type:format," where format is the word circle, square, or disc. We must include the ‘style’ attribute within the <ul> start tag.
Consider this simple unordered list with default spacing between the bullets and the text.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements </title>
</head>
<body>
<h3>Seven Wonders of the World</h3>
<ul>
<li>The Great Wall of China</li>
<li>Chichen Itza</li>
<li>Christ the Redeemer</li>
<li>Matchu Picchu</li>
<li>Petra</li>
<li>Taj Mahal</li>
<li>Colosseum</li>
</ul>
</body>
</html>
In this article we shall discuss some methods that can help in controlling the space between the bullets and the list elements.
Using Span Elements
The <span> tag is an inline container that is used to mark up a section of text or a section of a document. Using the class or id attribute, the <span> tag can be easily styled with CSS or manipulated with JavaScript. It is similar to the <div> tag, but div> is a block-level element, whereas <span> is an inline element. Following is the syntax
<span class="">Some Text</span>
Example
The following example shows how the space between the bullets and list elements can be changed by inserting the list text inside the span tag.
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements</title>
<style>
body{
background-color:lightyellow;
margin-left:200px;
margin-top:100px;
}
li {
color: slategrey;
}
span {
position: relative;
left: -10px;
}
</style>
</head>
<body>
<h3>Seven Wonders of the World</h3>
<ul>
<li>
<span> The Great Wall of China</span>
</li>
<li>
<span>Chichen Itza</span>
</li>
<li>
<span>Christ the Redeemer</span>
</li>
<li>
<span>Matchu Picchu</span>
</li>
<li>
<span>Petra</span>
</li>
<li>
<span>Taj Mahal</span>
</li>
<li>
<span>Colosseum</span>
</li>
</ul>
</body>
</html>
Using Padding-left Property
Padding is the space between an element's content and its border. It creates extra space within an element, while margin creates extra space around an element. The padding-left property specifies an element's left padding (space).
Syntax
Following is the syntax
padding-left: length|percentage|initial|inherit;
Example
In this example we will see how adjusting the padding on the list elements will allow us to control the spacing between the bullets and the text. The bullets scale according to the size of the text.
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements</title>
<style>
body{
background-color:lavender;
margin-left:200px;
margin-top:100px;
}
div ul li {
padding-left: 40px;
color:darkblue;
background-color:lightcyan;
}
div p{
font-size:20px;
font-weight:600;
background-color:white;
width:300px;
text-align:center;
}
div ul{
padding-left:70px;
background-color:azure;
width:230px;
}
</style>
</head>
<body>
<div>
<p>Factors of Good Health</p>
</div>
<div>
<ul>
<div>
<li>The Great Wall of China</li>
<li>Chichen Itza</li>
<li>Christ the Redeemer</li>
<li>Matchu Picchu</li>
<li>Petra</li>
<li>Taj Mahal</li>
<li>Colosseum</li>
</div>
</ul>
</div>
</body>
</html>
In this method, we must keep in mind that the bullet and the text must be the same colour. Furthermore, we cannot move the bullet closer to the text than the browser's default, and we have no control over the bullet's vertical positioning.
244 Views
To Continue Learning Please Login