<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Next sibling selector - out of control margin</h1>
      <figure class="callout">
        <p>
          Because the CSS applied with the <code>* + *</code> selector is recursive,
          we can get unwanted behaviour like unpredictable space.
        </p>
        <p>
          The semi-transparent red boxes show the margin being applied both where you might expect it to be and where you probably don’t want it to be.</p>
      </figure>
      <div class="top box">
        <p>I have no margin because I am the first child.</p>
        <p>
          I have <code>margin-top</code> because I am a <strong>next sibling</strong>.
        </p>
        <p>
          I have a <strong>bold</strong> <em>then an emphasised bit of text</em>,
          which because I put <code>inline-block</code> on my emphasised text, gives
          us unwanted spacing.
        </p>
      </div>
    </article>
  </div>
</main>

.top * + * {
  margin-top: 1.5em;
}

em {
  display: inline-block;
}

/* Presentation styles */
.top p {
  border: 1px solid var(--color-primary);
  background: var(--color-light);
  padding: 1em;
}

/* Presentational styles */
.top * + * {
  position: relative;
}

.top * + *::before {
  content: "";
  width: 100%;
  height: 1.5em;
  background: #ff807b;
  position: absolute;
  bottom: 100%;
  left: 0;
  outline: 1px solid #9d0600;
  opacity: 0.5;
}