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

 <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
 </div>

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.

Answer 1

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;
}