Nested list item indent

Many modern browsers indent list items 40 pixels by default.

When a nested list contains more three or more levels, the default indent becomes more pronounced.

You can use padding-inline-start to control this, as shown in the following examples:

• Browser default (40px)
• Custom indent (16px)

Here, the first example shows the typical browser default (40px) and the second reduces this to 16px, as shown in this CSS rule:

.example-list-indent-16 ul {
   padding-inline-start: 16px;
}

Framework impact

Common web design design frameworks, such as Bootstrap, often reset (or reboot) browser style defaults to simplify cross-browser design.

These changes can affect the list indent. For example, this site defaults to a list indent of 32px because its theme incorporates Bootstrap.

As a result, you may need to experiment to achieve your desired results.

Vital statistics

• 4 Jun 2024: First post