---
layout: post
title: "CSS margin"
subtitle: "To push away your neighbours"
section: css
---
If padding adds space _inside_ an element (between its border and its content), margins adds space _outside_ between an element and _other elements_.
{% highlight html %}
Hey, you know what sucks?
vaccuums
Hey, you know what sucks in a metaphorical sense?
black holes
Hey, you know what just isn't cool?
lava?
{% endhighlight %}
Hey, you know what sucks?
vaccuums
Hey, you know what sucks in a metaphorical sense?
black holes
Hey, you know what just isn't cool?
lava?
{% highlight css %}
p{ margin: 40px;}
{% endhighlight %}
Hey, you know what sucks?
vaccuums
Hey, you know what sucks in a metaphorical sense?
black holes
Hey, you know what just isn't cool?
lava?
### Merging vertical margins
Let's have a title and a subtitle.
{% highlight css %}
.title{ margin-bottom: 30px;}
.subtitle{ margin-top: 15px;}
{% endhighlight %}
{% highlight html %}
MarkSheet
A simple HTML/CSS tutorial
{% endhighlight %}
MarkSheet
A simple HTML/CSS tutorial
As the title of this section may have hinted at the answer, the margin between the two elements will be `30px`, and **not** `45px`. That is because margins that "touch" each other will **merge** with each other.
#### "That's weird!"
You can consider an element's margin as the **minimum space** it want to stay _away_ from other elements.
It's like the element saying: "Ok, I want the next element to be _at least_ 30px away from me. If it's more, why not. But at least 30px please!"
### Choosing between margin and padding
Tricky question. This question comes up when no border nor background is applied. Indeed: if a border or a background is set on _either_ element, the visual rendering will be different. But if none is present, and considering margins and paddings are _transparent_, the result will look the same.
Ask yourself _why_ you're spacing things. Is it to allow the inner content to breath more? Or is to allow the whole element to breath more? It's padding in the first case, margin in the second.
Also, considering how margins can **merge**.