Zero Padding for List

To set zero padding for the given list using CSS, set padding property for the list with a value of 0 as shown in the following.

</>
Copy
ol {
  padding: 0;
}
/* or */
ol {
  padding: 0;
}

Note: By default, there would be a left side padding of 40px for a list.

Examples

1. Zero padding for ordered list

In the following example, we take an ordered list and set padding: 0; for the list.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    ol {
      padding: 0;
    }
  </style>
</head>
<body>
  <ol>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Mango</li>
  </ol>
</body>
</html>

2. Zero padding for unordered list

In the following example, we take an unordered list and set padding: 0; for the list.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    ul {
      padding: 0;
    }
  </style>
</head>
<body>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Mango</li>
  </ul>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned how to use CSS padding property to set a zero padding for the given list, with examples.