On their own, components in Mod are not styled with consideration for other components. In other words, any margins or padding used in components are specific to only that component. This is done intentionally to make components as flexible as possible and avoid limiting your creativity.
As you start to put components to use in your project, you will want to be mindful of this. The recommended approach for composing together components is to utilize Mod's utility classes for handling margins and padding.
For example, if we have a component like Marketing Section Header and want to render it above a Marketing Section component, we might have something like this:
Composition Example
<div class="mod-marketing-section-header mod-margin-bottom-50">
...
</div>
<section class="mod-marketing-section-style-1">
...
</section>Above, on the Marketing Section Header component, we've utilized Mod's mod-margin-bottom-50 utility class to add a 50px margin to the bottom of that component. This creates a 50px gap between the Marketing Section Header and Marketing Section component.