Margin Usage

When using margins, try to only make an effect on the element that you put the margin to. It will be so much easier to maintain.

The Ways

Margin Usage 1

Practically, there are 3 ways that you can use to add some spacing to your elements.

Top and Bottom

This calls for a specific use case, but usually, when you stack elements in a list, the margin will be doubled between 2 texts.

Margin Usage 2

It might cause an uneven margin.

Top or Bottom

Margin Usage 3

Nice, both work. But, why prefer one over the other?

Margin Bottom Side Effect

When using margin-bottom, this problem will appear

Margin Usage 4

When you remove an element, a side effect requires you to adjust the top element margins.

It is a nightmare to maintain because you need to find that other element, even though we change the other.

Eliminating Side Effect

Instead, just use margin-top

Margin Usage 5

It just works.