Creating a margin between elements without adding in the last one.

Hello guys!

Just sharing a simple tip about adding some margin or padding between components.
CSS has so many ways to do it, but this one is simple and smooth.

So, as you see the last padding in this image example seems to be with more padding than the above ones.

How to solve it? Basically, we should avoid adding the last padding because there are no more posts below.

.post + .post {
    margin-top: 1rem;
}

The + sign will make the CSS attributes be add just if you have a "post" class before :)

Post example:

    <article className="post">
      Any text here
    </article>
  );

NOTE: Rem is equivalent to 16px. But is a nice pattern to help people who change interfaces on their pc or mobile. It will be rendered in the size that they define :)