Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

List Marker Position

The list markers (bullets, numbers, or images) can be inside or outside of the content flow. Here’s what that means:

Inside: This indents the markers so they are aligned within the flow of list content. This value isn’t obvious unless one or more of the list items take up more than one line of text.

Outside: This places the markers outside the flow of list content. This is the default position.

Let’s look at examples…

Outside Position

  • This is the outside position.
  • This is the default value.
  • Even with long lines of text the bullets remain outside the list item text.

Inside Position

  • This is the inside position. The bullets should be even with the flow of text on the left side.
  • This is not the default value.
  • Do you understand, or do I need to sprinkle magic brain dust on your pillow?

It's super easy to change the marker position from outside to inside. Just start your list off with this:

<ul style="list-style-position: inside;">

This works for ordered lists, too. Of course, you can use embedded or external styles as well. If you’re not sure how to do that, see the style sheets tutorial.

OK, it’s been fun. I have to go now. Feel free to hang out and look around. I'll leave the lights on for you.