Remove the left spacing of an ordered list (OL)

Question

By default, the ordered list looks like this:

There are some spacing on the left hand side of the list. Is there any way to remove those spacing?

Here is what I want:

On my website, the font-family and font-size will be changed by users dynamically. Therefore I am not able to preset padding-left.

Answer 1

On my website, the font-family and font-size will be changed by users dynamically. Therefore I am not able to preset padding-left.

Why would that stop you from using padding-left? It's absolutely the right tool to use when you want to override the browser's default stylesheet.

ul {
   padding-left: 0;
   /* If you want you can change the list type from inside or outside */
   list-style: inside decimal;
}

Answer 2

You should be able to use em for a scalable size (rather than fixed px sizing). This would allow scaling of the font size but match the scaled size when applying padding.

ol { padding-left: 1.8em; }

Here is a jsfiddle to illustrate. Change the body font-size to different scaled sizes (try 1em, 2em, etc.) and you'll see the paragraph matches the ol on the left.

You may find that browsers render at different sizes. 1.8em, works with Chrome, but it may require 1.6em or 1.9em for Firefox or IE. The thing with the web is it is fluid and scalable, so shooting for pixel precision, especially when working with user-scalable fonts is almost always a no-win situation.