Why I fell in love with margin-top
Tags: css, html, frontend
Published: 2021-10-07 17:08:48

---
title: Why I fell in love with margin-top
published: true
description: A simple rule to stay sane when dealing with vertical spacing in CSS. 
tags: css, html, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/691ka0uymh1ynq2sgdi6.png
---
When you write CSS, chances are good you constantly struggle with spacing. If you never had a situation where you needed to open up the inspector to find the origin of vertical spacing, this article is not for you.

To avoid this struggle, I found that one very simple rule works surprisingly well for me:

**Use `margin-top` only.**

I’ve been following this rule now for more than three years and in many different projects, and it proves to be just helpful.

*You need to decide which element gets vertical spacing?*
Add `margin-top` to the lower element.

*You want to increase/decrease some vertical spacing?*
Change the `margin-top` of the lower element.

---

Here are some best practices and exceptions I came along:

## The next/subsequent sibling combinator

Sometimes you want to define spacing below an element. For example a heading that needs some space between itself and the next element, whatever it is. In this case you can use the [next-sibling combinator](https://www.w3.org/TR/selectors-3/#sibling-combinators)

```css
.element + * {
  margin-top: 1rem
}

/* Instead of: */

.element {
  margin-bottom: 1rem
}
```

If you have multiple inline-block elements below each other by the help of line break elements you can use the [subsequent-sibling combinator](https://www.w3.org/TR/selectors-3/#sibling-combinators):

```html
.inlineBlockElement
<br>
.inlineBlockElement
<br>
.inlineBlockElement
```

```css
.inlineBlockElement ~ .inlineBlockElement {
  margin-top: 1rem
}

/* Or if you don’t know the next elements class */
.inlineBlockElement ~ *:not(br) {
  margin-top: 1rem
}
```

## Horizontal spacing

This rule is meant for vertical spacing, but you can apply it to horizontal spacing as well: Use `margin-left` when possible.

But be careful with inline-block elements that may break into the next row. In this case using `margin-right` is better as the spacing on the right is not visible.

`margin-left`
![margin-left](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv1ueyc3tvpk6fcb1t4o.png)

`margin-right`
![margin-right](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smb85rsz6uzdbcgew26m.png)

## Exception: content added with `:before` 

There is no rule without exceptions, here is one I stumbled upon.

Let’s say you have an icon above a paragraph of text and this icon is a :before pseudo element. As the content after `:before` cannot be targeted using CSS you need to use `margin-bottom`.

```html
<div>
  :before
  This is some content you can not easily give margin-top.
</div>
```

## Why not `margin-bottom`?

Actually, this was my first approach but I switched to `margin-top` for several reasons.

### 1. Less code navigation

Most of the time I append new elements when writing markup. When doing so my scope is this newly added element. And thus setting  `margin-top` for this element is easier than eg. navigating to the previous elements css to set its `margin-bottom`.

### 2. The next/subsequent sibling combinator

As there is no previous-sibling selector in CSS3, you can not easily say "Hey, if there is something before me it should have margin-bottom"

### 3. It looks better and is shorter to write

Sure, this is not reason #1, but who wants to write "bottom" all the time?

```css
.element {
  margin: 1rem 0 0;
}
.element {
  margin-top: 1rem;
}

/* VS */

.element {
  margin: 0 0 1rem;
}
.element {
  margin-bottom: 1rem;
}
```

## No headaches

This rule should make your life easier, not harder. Avoiding `margin-bottom` is simple most of the time, but if you encounter a situation where this is not the case, don’t take it too serious.

And of course, if there are other guidelines for a project they should always have a higher priority.

Thanks for reading, how do you cope with spacing? Do you have a similar rule? Let me know!