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.
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
<!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
<!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.