Ways reset the last margin

For example, I have a To-Do list ul > li for short.

I wanna have a gap between each li. How can I do it?

Flex Gap

I can use display flex.

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Cons

IE doesn't support gap 😞

Reset the last margin

.todo-item {
  margin-bottom: 1rem;
}

.todo-item:last-child {
  margin-bottom: 0;
}

You can do it. It's old school and all browsers support this.

Without last margin with :not

.todo-item:not(:last-child) {
  margin-bottom: 1rem;
}

I think It is very simple.

Without first margin

I want to say thank you to my colleagues for this way.

.todo-item + .todo-item {
  margin-top: 1rem;
}

I love this. It is so simple and so beautiful!

Thank you!