Defining space between components

I don't understand how spacial relations between components are handled by the big design systems out there. They only explain how the components look and behave in isolation, not in relation to each other.

For example, if I have an H1 followed by a paragraph, I would like the distance between them to be 40px. On a different page I have an H1 followed by an image, in which case I want the distance to be 30px.

For different combinations of elements I want to define different distances. I want to define these combinations so that designers and developers don't have to figure this out each time and there is more consistency between pages.

What is the best method to define spacial rules between components?