> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/mixin/margin/margin-variant.md).

# margin-variant()

{% code title="" lineNumbers="true" %}

```scss
@mixin margin-variant($id: 1, $size: 'unit-1') {
  .m-#{$id} {
    margin: get-var($size) !important;
  }

  .mb-#{$id} {
    margin-bottom: get-var($size) !important;
  }

  .ml-#{$id} {
    margin-left: get-var($size) !important;
  }

  .mr-#{$id} {
    margin-right: get-var($size) !important;
  }

  .mt-#{$id} {
    margin-top: get-var($size) !important;
  }

  .mx-#{$id} {
    margin-left: get-var($size) !important;
    margin-right: get-var($size) !important;
  }

  .my-#{$id} {
    margin-bottom: get-var($size) !important;
    margin-top: get-var($size) !important;
  }
}
```

{% endcode %}