HTML List Indent

This post will look at many ways to indent text/list in an HTML document.

The amount of space between lines of text in a block or left corner and list components is determined by the text/list indentation style. It usually denotes the start of a paragraph.

When referring to the text, indent or indentation refers to the change in distance between a paragraph’s left and right margins. Move the cursor to the start of the line and press the Tab key on the keyboard to indent text.

List Indent in HTML

HTML Lists are used to express information lists. Each list can have one or more list components.

HTML lists are classified into three types.

1. ol - Numbered or ordered list
2. ul - List (Unordered or Bulleted)
3. dl - List of Descriptions or List of Definitions

Unordered list elements (<ul>) indent their list items by default. If you want to adjust the indentation distance, you may do so with CSS.

There are two techniques to list indentation that is often used.

1. margin-left: This attribute is used to set the margin area on an element’s left side. A positive value distances it from its neighbors, while a negative number brings it closer.
2. padding-left: This attribute is used to specify the amount of space between the content and the border. The padding-left attribute specifies an element’s left padding (space).

In CSS, padding is the area between the border and the content of an element, while a margin is an area surrounding an element’s border.

The padding property controls the inside space of an element, and the margin property controls the area around it.

To further understand the previous concept, consider the following example.

<ul class="outerUL">
  <li>Tea</li>
  <li>Coffee
    <ul class="innerUL">
    <li>Black coffee</li>
    <li>Green coffee</li>
    </ul>
  </li>
  <li>Milk Shake</li>
</ul>

.innerUL {
    padding-left: 50px;
}

.outerUL {
    margin-left: 100px;
}

In the preceding example, we defined one unordered list and one nested unordered list. The margin-left property is used to indent the outer list, and the padding-left property is used to indent the inner list.

Run the above line of code in any browser compatible with HTML.