This is where utility classes come into play:
<div class="spacing-bottom-sm">
<ComponentOne />
</div>
<div class="spacing-bottom-lg">
<ComponentTwo />
</div>
<ComponentThree />
The benefit here is that it keeps your components simple and allows you to space them differently in different pages/components.
For horizontal spacing, I recommend using/making a grid layout component that would allow you to set gutters. Take a look at Grid Styled if you don't have one already.
Keep in mind that you still want to keep your code DRY. If you're copying and pasting the same spacing and group of components a lot, then create a new component to contain them and stay consistent.