The margin-left property sets the left margin of an element.
When you apply this property to the LI element, the indent for the list items can be specified.
.example {
margin-left: 30px;
}
| Property | Value | Explanation |
|---|---|---|
| margin-left | length, %, or auto | the left margin |
<html> <head> <title>TAG index</title> <style type="text/css"> .example1 { margin-left: 25px; } </style> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li class="example1">Third list item</li> <li class="example1">Fourth list item</li> <li>Fifth list item</li> <li>Sixth list item</li> </ul> </body> </html>
Nested list example
<html> <head> <title>TAG index</title> <style type="text/css"> .example2 li li { margin-left: -25px; } </style> </head> <body> <ul> <li>First list item</li> <li>Second list item <ul> <li>Third list item</li> <li>Fourth list item</li> </ul> </li> <li>Fifth list item</li> <li>Sixth list item</li> </ul> <ul class="example2"> <li>First list item</li> <li>Second list item <ul> <li>Third list item</li> <li>Fourth list item</li> </ul> </li> <li>Fifth list item</li> <li>Sixth list item</li> </ul> </body> </html>