How to remove indentation from an unordered list item using CSS?

CSS Web Development Front End Technology

When it comes to style unordered lists using CSS, indentation is a common feature used to give a visual hierarchy to the list items. However, in some cases, you may want to remove the indentation from a specific list item or from the entire list altogether.

An unordered list, also known as a bulleted list, is a type of HTML list that presents information as a list of items, with each item preceded by a bullet or a symbol. The items in the list are not numbered or ordered in any particular sequence, and the purpose of an unordered list is to visually separate and organize related content into discrete items.

In this article, we will learn how to remove the indentation from an unordered list item and see the different methods used to perform this task in CSS.

Different methods to remove indentation from an unordered list item?

There are different methods to remove indentation from an unordered list item in CSS. Let’s discuss each one of them in detail along with its syntax and examples.

Method 1: Using text-indent property

In this method, we will use the text-indent property to remove the indentation from an unordered list item. The text-indent property is used to specify the amount of indentation to be applied to the first line of text within an element. To remove the indentation, we can set the text-indent value to 0 for the list item.

Syntax

Below is the syntax to remove the indentation from an unordered list item using the text-indent property.

ul li {
   text-indent: 0;
}

Example

In the given example, we have used the text-indent property to remove the indentation from the unordered list of programming languages.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the text-indent property</title>
   <style>
      ul li {
         text-indent: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
      <li>Kotlin</li>
      <li>Scala</li>
      <li>Perl</li>
      <li>Objective C</li>
   </ul>
</body>
</html>

Method 2: Using padding property

In this method, we will use the padding property to remove the indentation from an unordered list item. The padding property is used in setting the amount of space between the content of an element and its border. To remove the indentation, we can set the padding-left value to 0 for the list item.

Syntax

Below is the syntax to remove the indentation from an unordered list item using the padding property.

ul li {
   padding-left: 0;
}

Example

In the given example, we have used the padding property to remove the indentation from the unordered list of programming languages.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the padding-left property</title>
   <style>
      ul li {
         padding-left: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
      <li>Kotlin</li>
   </ul>
</body>
 </html>

Method 3: Using margin property

In this method, we will use the margin property to remove the indentation from an unordered list item. The margin property is used in setting the amount of space between an element and its neighboring elements. To remove the indentation, we can set the margin-left value to 0 for the list item.

Syntax

Below is the syntax to remove the indentation from an unordered list item using the margin property.

ul li {
   margin-left: 0;
}

Example

In the given example, we have used the margin-left property to remove the indentation from the unordered list of programming languages.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the margin-left property</title>
   <style>
      ul li {
         margin-left: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
   </ul>
</body>
</html>

Method 4: Using list-style position property

In this method, we will use the list-style position property to remove the indentation from an unordered list item. By default, the marker is positioned outside the content area of the list item, which causes the indentation. However, you can set the list-style-position value to inside to move the marker inside the content area and remove the indentation.

Syntax

Below is the syntax to remove the indentation from an unordered list item using the list-style position property.

ul li {
   list-style-position: inside;
}

Example

In the given example, we have used the list-style position property to remove the indentation from the unordered list of programming languages. The list-style-position property specifies the position of the list-item markers (bullet points). Here we have set the list-style-position to inside which means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the list-style-position property</title>
   <style>
      ul li {
         list-style-position: inside;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
   </ul>
</body>
</html>

Conclusion

Indentation is a commonly used feature to provide a visual hierarchy in unordered lists using CSS. However, in certain cases, we may need to remove indentation from a specific item or from the entire list. In this article, we have discussed how to remove the indentation and learned the different methods to remove the indentation from an unordered list item using CSS, including the text-indent, padding, margin, and list-style position properties. These methods can be applied based on the specific requirements and design needs of a web page. By understanding these methods, developers can have more control over the styling of their web pages and create more visually appealing designs.

Tarun Singh

Updated on: 14-Jul-2023

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started