Zero Margin for List
To set zero margin for the given list using CSS, set margin
property for the list with a value of 0
as shown in the following.
ol { margin: 0; } /* or */ ol { margin: 0; }
Note: By default, there would be a left and right side margin of 1em for a list.
Examples
1 Zero margin for ordered list
In the following example, we take an ordered list and set margin: 0;
for the list.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ol { margin: 0; } </style> </head> <body> <ol> <li>Apple</li> <li>Banana</li> <li>Cherry</li> <li>Mango</li> </ol> </body> </html>
2 Zero margin for unordered list
In the following example, we take an unordered list and set margin: 0;
for the list.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul { margin: 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 margin
property to set a zero margin for the given list, with examples.