Creating a margin between elements without adding in the last one.
Gustavo Henrique Silva Ten贸rio
Posted on December 20, 2023
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 :)
馃挅 馃挭 馃檯 馃毄
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.