How to add vertical spacing between block elements, but not top and bottom

Question

Say I have a bunch of P, LI, or DIV elements, with nothing between them. I want to control the vertical spacing between them, so they don't fit so tightly. But I don't want to add any space top and bottom, since that is handled by the parent element and I don't need more. Is there a simple way to do this that works for all block elements? Say I've got something like this : ``` p { margin: 5px 0; } ``` and then ```

1

2

3

4

``` But I don't want 5px above p 1, or below p 4, since the div already has padding and I don't want to go messing with that. I just want the 10px between p 1 and p 2, p 2 and p 3, etc. I'm sure I could do something kludgy (and I have many times), but am looking for something cleaner that I don't have to do a lot of special-casing for this common situation.

Accepted Answer

Use adjacent selectors

```
p + p { margin-top: 10px; }
```

Basically the concept is that, if a `p` comes after another `p` give 10px margin in between.

You usage is something similar to

```
p + p, li + li, div + div { 
    margin-top: 10px;
}
```

How to add vertical spacing between block elements, but not top and bottom

Solution

Problem