crumpled paper texture

Margin Usage

––– views

1 min read

0 likes

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

It's not a good practice, because the margin will collapse.

margin-usage-2

It's something that you don't want to have in your CSS. It will cause unexpected behavior.

Find more about margin collapse in Josh's Article

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 Effects

Instead, just use margin-top

margin-usage-5

It just works.