<article class="article">
  <h1>Lorem Ipsum Dolor Sit Amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto.</p>
  <figure>
    <img src="http://placehold.it/800x300/eaedf2?text=%20" alt="" />
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto.</p>
  
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem.</p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto.</p>
  
  <h2>Lorem Ipsum Dolor</h2>
  <figure>
    <img src="http://placehold.it/800x300/eaedf2?text=%20" alt="" />
  </figure>
  <figure>
    <img src="http://placehold.it/800x300/eaedf2?text=%20" alt="" />
  </figure>
  
  <h2>Lorem Ipsum</h2>
  <h3>Lorem Ipsum Dolor Sit Amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem.</p>
  <h3>Lorem Ipsum Dolor Sit Amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto.</p>  
  <blockquote>
    <p>Lorem ipsum dolor sit amet</p>
    <footer>— <cite>Lorem Ipsum</cite></footer>
  </blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem. In beatae neque earum dolore natus dolorem iusto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit fuga accusamus laudantium, error quam pariatur, officiis hic fugiat voluptatum quidem.</p>
</article>

<div class="control">
  <input id="highlight" type="checkbox" name="highlight">
  <label for="highlight">Highlight margins</label>
</div>
.article {
  > * + * { margin-top: 1.5rem; }
  
  > h2 + * { margin-top: 0.75rem; } 
  > h3 + * { margin-top: 0.5rem; } 
  > figure + * { margin-top: 3rem; } 
  > blockquote + * { margin-top: 2.5rem; } 
  
  > * + h2 { margin-top: 4.5rem; }
  > * + h3 { margin-top: 2.5rem; }
  > * + figure { margin-top: 3rem; } 
  > * + blockquote { margin-top: 2.5rem; } 
  
  // These margins can be highlighted
  > h2 + h3 { margin-top: 2rem; }
  > h2 + figure { margin-top: 1.25rem; }
  > figure + figure { margin-top: 2rem; }
}


// Enable highlighting
.article { 
  > h2 + h3:before, 
  > h2 + figure:before,
  > figure + figure:before {
    content: '';
  }
  
  > h2 + h3:before {
    top: -2rem;
    height: 2rem;
  }
  
  > h2 + figure:before {
    top: -1.25rem;
    height: 1.25rem;
  }
  
  > figure + figure:before {
    top: -2rem;
    height: 2rem;
  }
}
View Compiled

External CSS

  1. https://codepen.io/sebastianeberlein/pen/QpRGQJ

External JavaScript

  1. https://codepen.io/sebastianeberlein/pen/QpRGQJ