0

I'm having trouble setting up a universal stylesheet where I need to set up different spacings between different elements, depending on what follows that element?

For example, if I have an <h1> followed by an <h2>, that's going to have different spacing than an <h2> followed by a <p>.

I can't just add the same spacing after <h1>, because it will be different depending on what follows.

The only thing I am aware of is this...

But, in this case, the 30px margin is added after the p, but not between the h1 and the p.

h1 + p {
  margin-bottom: 30px;
}

h1 + ul {
  margin-bottom: 30px;
}
<h1>Hello</h1>
<p>World</p>
<hr>
<h1>Hello</h1>
<ul>
  <li>Real</li>
  <li>World</li>
</ul>

I'm trying to write styles based on what follows each element. I hope that makes sense.

Millhorn
  • 2,953
  • 7
  • 39
  • 77
  • 1
    Short answer is that there's no way yet, there are workarounds with `js` tho, I think you should check this [question's](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) answers, otherwise you could revert the relation by adding the space in the child. – Parco Aug 13 '21 at 02:00
  • 1
    You can use `margin-top` instead of `margin-bottom`, so that you will get the exact space between these two. – Suresh Ponnukalai Aug 13 '21 at 02:06
  • I've decided to use the sibling selector, and just use `margin-top` as suggested by @SureshPonnukalai – Millhorn Aug 13 '21 at 02:06
  • Is the content dynamic or do you know exactly what will come next? – Riza Khan Aug 13 '21 at 02:36

0 Answers0