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

gustavohst

Gustavo Henrique Silva Ten贸rio

Posted on December 20, 2023

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

馃挅 馃挭 馃檯 馃毄
gustavohst
Gustavo Henrique Silva Ten贸rio

Posted on December 20, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related