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!
Top comments (0)