space before li items in ol list

Question

I have a problem with the ol list : before each li item there is a space, I don't need it but I want to keep the number before items. I tried to deal with it by setting margin and padding to 0 on ol and li elements but it didn't work. The code looks like this:

<nav>
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ol>
</nav>

Do you have any idea using only css and html languages?

check my answer below it works as per your requirement. – Manjuboyz Apr 05 '20 at 17:16 — Manjuboyz, Apr 05 '20 at 17:16

score 1 · Accepted Answer · 2020-04-05T17:00:55.807

1

By default ol and ul list have some margin and padding. It's may gonna fix your problem.
This is what by default ol and ul tag have, doc

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

ol{
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 10px; //by default 40px, it's up to you
}

<nav>
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ol>
</nav>

edited Apr 05 '20 at 17:00

answered Apr 05 '20 at 16:46

Nice documentation, I like this one – Apr 05 '20 at 16:49
@DCR Do you ask this question? – Apr 05 '20 at 16:53
no but your answer doesn't work. Op clearly states he wants to remove the space between the number and the item => 1. item – DCR Apr 05 '20 at 16:54
@DCR see my edited ans, is it ok? – Apr 05 '20 at 17:01
no, but not a bad try. The padding and margin on the ol adds margin and padding to the very left, right, top or bottom of the ol. so it doesn't target the space between the number and the item. I'm not sure how you can change. You may have to build a customized ol – DCR Apr 05 '20 at 17:04
Can you solve this without build a customized ol? – Apr 05 '20 at 17:06

Jérôme · Answer 2 · 2020-04-05T17:06:02.923

0

Try to set padding on your ol

ol {
    padding-left: 0; 
}

edited Apr 05 '20 at 17:06

answered Apr 05 '20 at 16:41

Jérôme

978
1
9
22

score 0 · Answer 3 · answered Apr 05 '20 at 16:46

0

Unordered and ordered lists have a default left padding. You can remove that padding by writing a style rule. Like this:

ol {
  padding-left:0;
}

More info on styling lists here

answered Apr 05 '20 at 16:46

Juan Marco

3,081
2
28
32

score 0 · Answer 4 · answered Apr 05 '20 at 16:51

0

Just add padding on the ol element, but keep the list style.

ol {
  padding: 0;
  list-style: inside decimal;
}

answered Apr 05 '20 at 16:51

Alejandro Barone

1,743
2
13
24

score 0 · Answer 5 · answered Apr 05 '20 at 17:14

You can do something like.

It is a cheat code but it works.

ol {
  counter-reset: number;
}
li {
  list-style: none;
  counter-increment: number;
}
li::before {
  content:counter(number)".";
  position: relative;
  left:0px;
}

<nav>
    <ol>
        <li>item</li >
        <li>item</li>
        <li>item</li>
    </ol>
</nav>

space before li items in ol list

5 Answers5