Reducing the Gap Between a Bullet and Text in a List Item

CSS: Control space between bullet and li

Put its content in a span which is relatively positioned, then you can control the space by the left property of the span.

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>

How is it possible to modify the gap between a bullet and its list text?

The only way I've been able to achieve this [decreasing the native browser rendered spacing of the li] is by adding additional markup to your li and setting a negative margin.

As an example:

Markup:

<ul>
    <li>
        <span>This is the text</span>
    </li>
</ul>

CSS

li span { margin-left: -10px; }

This could add quite a bit of extra unnecessary markup for such a small requirement. You'd be better of using a background image on your li element which offers better position control without all the extra markup.

CSS - space between the bullet and the list without padding the list

Have you considered using a pseudo element?

This process can offer complete control over the bullets position and shape.

li {

  list-style: none;

  position: relative;

}

li::before {

  content: '•';

  position: absolute;

  left: -30px;

}

<ul class="list">

  <li>A</li>

  <li>B</li>

  <li>C</li>

</ul>

Remove space of the bullet when list-style-type: none is used

Use list-style-position:inside

li.title {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

ul {
  list-style-position: inside
}

<ul>
  <li class="title">Title</li>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Spacing between bullet list rows

Add top and bottom padding to the lis, like so:

ul li { padding: 5px 0px; }

And take out that crazy looking <p /> tag.

Demo: http://jsfiddle.net/aFED2/