How Can I Control the Spacing Between Bullets and List Items in CSS?

CSS: Regulating the Distance Between Bullets and List Items

Problem:

Adjusting the horizontal spacing between bullets and their corresponding

elements within an ordered or unordered list poses a challenge. To illustrate, consider the following:

* Some list text goes
   here.

Desired Outcome:

Modify the space to obtain:

*         Some list text goes
          here.

or

*Some list text goes
 here.

Solution:

Enclose the list item's content within a span element with relative positioning. The left property of the span can be manipulated to control the desired spacing.

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

The above is the detailed content of How Can I Control the Spacing Between Bullets and List Items in CSS?. For more information, please follow other related articles on the PHP Chinese website!