November 2024

Remove Markers and Padding from List Elements with CSS

Here's the code I use to turn off markers and padding for list elements:

CSS

ul.no-markers {
  list-style: none;
}

ul.no-padding {
  padding-left: 0;
  list-style: none;
}

ol.no-markers {
  list-style: none;
}

ol.no-padding {
  padding-left: 0;
  list-style: none;
}

Examples

Markers off

HTML

<p>List with markers turned off</p>
<ul class="no-markers">
  <li>alfa</li>
  <li>
    <ul>
      <li>bravo</li>
      <li>charlie</li>
      <li>delta</li>
    </ul>
  </li>
  <li>echo</li>
</ul>

Output

List with markers turned off

alfa
- bravo
- charlie
- delta
echo

Note that turning off markers on a parent list does not remove them from children.

Remove padding

HTML

<p>List with padding and markers both turned off</p>
<ul class="no-padding">
  <li>alfa</li>
  <li>
    <ul>
      <li>bravo</li>
      <li>charlie</li>
      <li>delta</li>
    </ul>
  </li>
  <li>echo</li>
</ul>

Output

List with padding and markers both turned off

alfa
- bravo
- charlie
- delta
echo

Turning off padding on a parent list does not remove if from children.

Note that the style also turns off markers Otherwise, they show up to the left of the bounding area.

end of line