Skip to content
Related Articles

Related Articles

How to remove indentation from an unordered list item using CSS?
  • Last Updated : 22 Apr, 2019

While designing web pages we used to add some list of items sometimes they are numbered (in various style) and sometimes they are bulleted (in various style). It might happen when we are trying to design a navigation bar or any kind list in which items are neither numbered nor bulleted we don’t need numbers or bullets and also no margin. To remove that indentation from an unordered list (a list having bullets) there needs styling to be done using CSS. The style will be implemented only on the list. So the selector would be ul.

Syntax:

ul {
    // CSS Property
}

Example: This example creates a page with a list with zero(0) indent .




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Remove indentation from an 
        unordered list of items
    </title>
      
    <!-- CSS style to remove indentation
    from list of items -->
    <style>
        ul {
            list-style:none;
            padding-left:0;
        }
    </style>
</head>
  
<body>
    <h3>Computer science subjects:</h3>
    <ul>
        <li>Data Structure</li>
        <li>Algorithms</li>
        <li>Operating System</li>
        <li>Computer Network</li>
        <li>DBMS</li>
        <li>Web Technology</li>
    </ul>
</body>
  
</html>                    

Output:

In the above example, padding-left property is used to set the indentation from left. The padding-left:0 is used to remove indentation (space) from left. The list-style: none property is used to remove list-style property from the list of items.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :