Search code examples
cssmargin

Manage margins so that the last element(s) have no margin(s)

I work with boxes and I want to always give the last element a "margin-bottom: 0". So first I give every element a "margin-bottom: 1em;". I now want to delete this margin bottom from the last element in my boxes but if there is an element within it doesn't work and I still have a margin at the bottom. any idea how to do this? It could be a paragraph or a DIV or SPAN or whatever, so I do not always want to do this by hand. I want to make a mixin wth this.

I tried:

section *+:last-child {
   margin-bottom: 0;
   border: 3px solid blue;
}

But in the last div there is a paragraph with margin so it doesn't work.

Solution

  • You want to use :not(). That is,

    section:not(:last-child) { margin-bottom:1em; }

    My syntax might be wrong for what you're doing but that's a start.