How to remove indentation from an unordered list item?

Dealing with the ghosts of browsers past

Horizontal scroll bar nuisance in veteran browsers like IE 8? The margin-left property is our trusty fallback:

ul { 
  list-style: none; // Traded bullets for bubble gum 😄
  margin-left: 0; // Went left, nothing happened, Now what?!
}


Grip those bullets with CSS positioning

Let's keep the bullets, yet closet the indentation. Use list-style-position: inside; along with padding reset:

ul {
  list-style-position: inside; // Inside job 🕵️
  padding-left: 0;
}


This keeps your bullet points inside the content flow. No bullet was harmed during formatting!

Deciphering CSS specificity

If your new swanky styles are behaving like wallflowers, check their CSS specificity. Ensure your selector is specific enough to overrule the browser default styles.

The CSS Reset Magic Trick

To deal with cross-browser quirks, use a CSS reset or normalize.css. It sets a clean stage for your list styles:

/* CSS Reset */
ul, li {
  margin: 0; // Margins? Don't need 'em!
  padding: 0; // Paddings? Overrated!
  list-style: none; //List style? We got this!
}


Uniform text alignment

When adjusting list indentation, ensure your <li> items' text alignment sings the same tune as your surrounding text:

li {
  /* Waiting for text block alignment */
}


Try out different margin, padding, and text-indent combinations.

The negatives of negatives

Using negative text-indent isn't your friend. It risks accessibility issues and unexpected outcomes on different screen sizes.

Advanced formatting

Non-standard display properties

Changing <li>'s display property can remove indentation, but also the bullets (maybe also your hair 😉):

li { 
  display: table-row; // Transforming to a row, no dent, no bullets. Oops!
}


Nested lists consistency

Nested lists? Maintain styling cohesion:

ul ul { /* Here goes the nested list styles */ }


Block formatting contexts

Creating a new block formatting context may affect indentation:

ul { 
  overflow: hidden;  // Stop the flow! Stand still.
}
