DEV Community

Cover image for Creating a margin between elements without adding in the last one.
Gustavo Henrique Silva Tenório
Gustavo Henrique Silva Tenório

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
Enter fullscreen mode Exit fullscreen mode

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 :)

Top comments (0)