Remove left padding and margin of First Level of li element of ul

Question

I have this nested Ul li element

Lists can be nested (list inside list)

The first level of li elements Coffee, Tea and Milk taking default Padding and Margin. How to remove the first level of li elements left margin and padding.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

That is the default `padding-left` applied to `ul`, from the browser stylesheet. — CBroe, Mar 13 '23 at 09:29
By _overwriting_ it with a value you like more, via your own stylesheet? — CBroe, Mar 13 '23 at 09:34
Yes i have tried a lot and did not got a sloution. Thats why i posted here — nick coder, Mar 13 '23 at 09:35
We can not guess what you might have tried. In cases like this, you should _show us_ - only then can we possibly tell where you might have gone wrong. — CBroe, Mar 13 '23 at 09:39

qiqqq · Accepted Answer · 2023-03-13T09:38:14.403

If you have some parent for this first ul element (for example some div), you can use direct child selector >:

div > ul {
  margin: 0;
  padding: 0;
}

but if you have only this structure you posted above, you can use :not selector:

ul:not(li ul) {
  margin: 0;
  padding: 0;
}

you can also reset padding and margin for the first ul element and in the next CSS rule overwrite it for ul nested in ul:

ul {
  margin: 0;
  padding: 0;
}

ul ul {
  margin: revert;
  padding: revert;
}

revert will reset margin and padding to the previous value, but you can also use just some value, like 10px instead of revert

score 0 · Answer 2 · answered Mar 13 '23 at 09:43

0

.first-ul{display: inline;} add this class

answered Mar 13 '23 at 09:43

mu liu

1

Remove left padding and margin of First Level of li element of ul

2 Answers2