title: targeting more than one following element with element+element
body: <p>What I want to do is target more than one <code>&lt;p&gt;</code> with the following code:</p>
  
  <pre><code>h1+p
  {
      margin-left: 20px;
  }
  
  h2+p
  {
      margin-left: 27px;
  }
  
  h3+p
  {
      margin-left: 35px;
  }
  </code></pre>
  
  <p>Below is the effect I am trying to achieve:</p>
  
  <p><img src="https://img.skitch.com/20120503-pw3k3at8gty5n8gi7nbt3kbt52.jpg" alt="The effect"></p>
  
  <p>The problem is that when there is a new <code>&lt;p&gt;</code> element, the block of text is obviously going to revert to it's normal position, without the margin, and not longer inline with the heading.</p>
  
  <p>(like so)</p>
  
  <p><img src="https://img.skitch.com/20120503-ttwsqinf9f63ehwcryn6wk41bx.jpg" alt="The issue"></p>
  
  <p>Is there a better way of attacking this problem? (or one that works for that matter)</p>