Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading