How to remove list indentation with CSS

In CSS, there are typically two common methods to remove the default indentation of lists (e.g., <ul> or <ol>). These indents are usually caused by the browser's default stylesheet. Here are the two approaches:

Method 1: Set padding and margin to 0

You can eliminate indentation by setting the padding and margin properties of the list to 0. This is the most straightforward approach. The CSS code is as follows:

css
ul, ol {
  margin: 0;
  padding: 0;
}

This code sets the padding and margin of unordered lists (ul) and ordered lists (ol) to 0, effectively removing the indentation.

Method 2: Use the list-style-position Property

Another method involves setting the list-style-position property to inside. This not only adjusts the position of list item markers (such as bullets or numbers) but also modifies text alignment, resulting in no visible indentation.

css
ul, ol {
  list-style-position: inside;
}

This code places the list item markers inside the beginning of the content, which minimizes external indentation.

Example

Consider the following HTML structure:

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Using Method 1 (setting margin and padding to 0), the list will align flush with the left boundary without any indentation.

Using Method 2 (setting list-style-position: inside), the list item markers appear at the far left of the text within each item, creating a visual effect with no indentation, while markers remain on the same line as the text.

Both methods have trade-offs, and the choice depends on your specific design requirements. In practice, select the method that best fits your page layout to achieve the desired list styling.