Trouble using Spacing field to give to your own module

[TMisuna]

I have created my own heading module using the following code.
However, the following problems occurred

1) Placing this heading module in multiple pages as drag-and-drop content.
(2) Margin is given to each heading, margin-top:40px for the first, margin-top:60px for the second, and margin-top:80px for the third
3) Since the margin space field is used for the selector named .c-general-heading, it is overwritten as shown below, and it is not possible to give different margin-tops for each module.
How can I give a dynamic spacing number in the spacing field to a selector, is it down to some module-specific id or something?
Where can I look to solve this?

<h2 class="c-general-heading">
  <span class="c-general-heading__english">{{ module.general_heading_english }}</span>
  <span class="c-general-heading__japanese">{{ module.general_heading_japanese }}</span>
</h2>

{% require_css %}
<style>
  .c-general-heading {
    margin-top: {{ module.style.spacing_field.margin.top.value }}{{ module.style.spacing_field.margin.top.units }};
    margin-bottom: {{ module.style.spacing_field.margin.bottom.value }}{{ module.style.spacing_field.margin.bottom.units }};
    padding-right: {{ module.style.spacing_field.padding.right.value }}{{ module.style.spacing_field.padding.right.units }};
    padding-bottom: {{ module.style.spacing_field.padding.bottom.value }}{{ module.style.spacing_field.padding.bottom.units }};
    padding-top: {{ module.style.spacing_field.padding.top.value }}{{ module.style.spacing_field.padding.top.units }};
    padding-left: {{ module.style.spacing_field.padding.left.value }}{{ module.style.spacing_field.padding.left.units }};;
  }
</style>
{% end_require_css %}

The style reflected on the page. If you have multiple modules and set them in the style panel each time, they will be overwritten.

<style>
  .c-general-heading {
    margin-top: 40px;
  }
</style>

<style>
  .c-general-heading {
    margin-top: 60px;
  }
</style>

<style>
  .c-general-heading {
    margin-top: 80px;
  }
</style>

[pm8rsh88 · Accepted solution]

You have 1 class that is being given 3 different margins.

Each time the Module is used, it needs to have a unique ID if you want it to have 3 unique margins. 

As a quick solution, you can give the h2 an ID, that you select when using the module on a page.

<h2 class="c-general-heading" id="{{ module.margin_top }}">
  <span class="c-general-heading__english">{{ module.general_heading_english }}</span>
  <span class="c-general-heading__japanese">{{ module.general_heading_japanese }}</span>
</h2>

Add a logic > choice module called "margin_top" that spits out c-general-margin-40, c-general-margin-60 or c-general-margin-80 as an ID depending on your choice, then you can have styling for 3 different ID's

<style>
  #c-general-margin-40 {
    margin-top: 40px;
  }

  #c-general-margin-60 {
    margin-top: 60px;
  }
  #c-general-margin-60 {
    margin-top: 80px;
  }
</style>

[TMisuna]

% scope_css %} may be a solution.

[TMisuna]

I see, thank you very much.
However, this is only relevant for the top margin, and in fact the style panel allows both 4-cornered margins and padding to be selected, right? I don't think it is necessarily only about the margin tops.
In such a case, how can I specify the selector so that if I have multiple unique modules on the same page, they can each have different margins and paddings and not overwrite each other?
Is there anything in the boilerplate, for example, that replicates this? I would like to see a sample if you have one.

[pm8rsh88]

An alternative solution, if you want to be able to control the Margin and Padding from the front end, rather than manually editing the CSS file through the design manager. 

You could create a text module called header_id. Then you switch the class over to an ID, then modify the code slightly as per below. Now, every time you use the module, make sure to give header_id either a unique id or use one already used on the page to use the same padding/margin. 

<h2 id="c-general-heading-{{ module.header_id }}">
  <span class="c-general-heading__english">{{ module.general_heading_english }}</span>
  <span class="c-general-heading__japanese">{{ module.general_heading_japanese }}</span>
</h2>

{% require_css %}
<style>
  #c-general-heading-{{ module.header_id }} {
    margin-top: {{ module.style.spacing_field.margin.top.value }}{{ module.style.spacing_field.margin.top.units }};
    margin-bottom: {{ module.style.spacing_field.margin.bottom.value }}{{ module.style.spacing_field.margin.bottom.units }};
    padding-right: {{ module.style.spacing_field.padding.right.value }}{{ module.style.spacing_field.padding.right.units }};
    padding-bottom: {{ module.style.spacing_field.padding.bottom.value }}{{ module.style.spacing_field.padding.bottom.units }};
    padding-top: {{ module.style.spacing_field.padding.top.value }}{{ module.style.spacing_field.padding.top.units }};
    padding-left: {{ module.style.spacing_field.padding.left.value }}{{ module.style.spacing_field.padding.left.units }};;
  }
</style>
{% end_require_css %}