{
  "name": "utilities/margin",
  "title": "Margin",
  "description": "Use eurodata-ui's `ed-m` classes to add margin to elements",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/margin/",
  "sections": [
    {
      "heading": "Margin",
      "markdown": "Use eurodata-ui's `ed-m` classes to add margin to elements\n\neurodata-ui spacing utilities:\n\n-   Are token-based (`--ed-space-*`)\n-   Use logical properties for automatic RTL support\n-   Provide axis-based helpers (`mx`, `my`)\n-   Support individual logical sides (`mt`, `mb`, `ml`, `mr`)\n-   Include reset (`0`) and alignment (`auto`) utilities\n\n* * *"
    },
    {
      "heading": "Reset Margin (0)",
      "markdown": "Use `0` utilities to explicitly remove margin.\n\n| Class Name | CSS Property |\n| --- | --- |\n| `ed-m-0` | `margin: 0` |\n| `ed-mx-0` | `margin-inline: 0` |\n| `ed-my-0` | `margin-block: 0` |\n| `ed-mt-0` | `margin-block-start: 0` |\n| `ed-mb-0` | `margin-block-end: 0` |\n| `ed-ml-0` | `margin-inline-start: 0` |\n| `ed-mr-0` | `margin-inline-end: 0` |"
    },
    {
      "heading": "Auto Margin",
      "markdown": "Use auto margins for alignment in flex or grid layouts.\n\n| Class Name | CSS Property |\n| --- | --- |\n| `ed-m-auto` | `margin: auto` |\n| `ed-mx-auto` | `margin-inline: auto` |\n| `ed-my-auto` | `margin-block: auto` |\n| `ed-mt-auto` | `margin-block-start: auto` |\n| `ed-mb-auto` | `margin-block-end: auto` |\n| `ed-ml-auto` | `margin-inline-start: auto` |\n| `ed-mr-auto` | `margin-inline-end: auto` |"
    },
    {
      "heading": "Margin (All Sides)",
      "markdown": "Applies margin on all sides using spacing tokens.\n\n| Class Name | margin Value |\n| --- | --- |\n| `ed-m-1` | `--ed-space-1` (4px) |\n| `ed-m-2` | `--ed-space-2` (8px) |\n| `ed-m-3` | `--ed-space-3` (12px) |\n| `ed-m-4` | `--ed-space-4` (16px) |\n| `ed-m-5` | `--ed-space-5` (20px) |\n| `ed-m-6` | `--ed-space-6` (24px) |\n| `ed-m-7` | `--ed-space-7` (28px) |\n| `ed-m-8` | `--ed-space-8` (32px) |\n| `ed-m-9` | `--ed-space-9` (36px) |\n| `ed-m-10` | `--ed-space-10` (40px) |\n| `ed-m-11` | `--ed-space-11` (44px) |\n| `ed-m-12` | `--ed-space-12` (48px) |\n| `ed-m-13` | `--ed-space-13` (52px) |\n| `ed-m-14` | `--ed-space-14` (56px) |\n| `ed-m-15` | `--ed-space-15` (60px) |\n| `ed-m-16` | `--ed-space-16` (64px) |"
    },
    {
      "heading": "margin-inline",
      "markdown": "Applies spacing along the **inline axis** (text direction).\n\n-   LTR → left & right\n-   RTL → right & left (automatically flipped)\n\nUse `ed-mx-*` for horizontal spacing.\n\n| Class Name | margin-inline Value |\n| --- | --- |\n| `ed-mx-1` | `--ed-space-1` (4px) |\n| `ed-mx-2` | `--ed-space-2` (8px) |\n| `ed-mx-3` | `--ed-space-3` (12px) |\n| `ed-mx-4` | `--ed-space-4` (16px) |\n| `ed-mx-5` | `--ed-space-5` (20px) |\n| `ed-mx-6` | `--ed-space-6` (24px) |\n| `ed-mx-7` | `--ed-space-7` (28px) |\n| `ed-mx-8` | `--ed-space-8` (32px) |\n| `ed-mx-9` | `--ed-space-9` (36px) |\n| `ed-mx-10` | `--ed-space-10` (40px) |\n| `ed-mx-11` | `--ed-space-11` (44px) |\n| `ed-mx-12` | `--ed-space-12` (48px) |\n| `ed-mx-13` | `--ed-space-13` (52px) |\n| `ed-mx-14` | `--ed-space-14` (56px) |\n| `ed-mx-15` | `--ed-space-15` (60px) |\n| `ed-mx-16` | `--ed-space-16` (64px) |"
    },
    {
      "heading": "margin-block",
      "markdown": "Applies spacing along the **block axis** (stacking direction).\n\nIn standard horizontal writing mode:\n\n-   `margin-block-start` → top\n-   `margin-block-end` → bottom\n\nUse `ed-my-*` for vertical spacing.\n\n| Class Name | margin-block Value |\n| --- | --- |\n| `ed-my-1` | `--ed-space-1` (4px) |\n| `ed-my-2` | `--ed-space-2` (8px) |\n| `ed-my-3` | `--ed-space-3` (12px) |\n| `ed-my-4` | `--ed-space-4` (16px) |\n| `ed-my-5` | `--ed-space-5` (20px) |\n| `ed-my-6` | `--ed-space-6` (24px) |\n| `ed-my-7` | `--ed-space-7` (28px) |\n| `ed-my-8` | `--ed-space-8` (32px) |\n| `ed-my-9` | `--ed-space-9` (36px) |\n| `ed-my-10` | `--ed-space-10` (40px) |\n| `ed-my-11` | `--ed-space-11` (44px) |\n| `ed-my-12` | `--ed-space-12` (48px) |\n| `ed-my-13` | `--ed-space-13` (52px) |\n| `ed-my-14` | `--ed-space-14` (56px) |\n| `ed-my-15` | `--ed-space-15` (60px) |\n| `ed-my-16` | `--ed-space-16` (64px) |"
    },
    {
      "heading": "Individual Sides",
      "markdown": "Apply margin to a single logical side.\n\n### margin-block-start (top)\n\nUse `ed-mt-*` for block-start spacing.\n\n| Class Name | margin-block-start Value |\n| --- | --- |\n| `ed-mt-1` | `--ed-space-1` (4px) |\n| `ed-mt-2` | `--ed-space-2` (8px) |\n| `ed-mt-3` | `--ed-space-3` (12px) |\n| `ed-mt-4` | `--ed-space-4` (16px) |\n| `ed-mt-5` | `--ed-space-5` (20px) |\n| `ed-mt-6` | `--ed-space-6` (24px) |\n| `ed-mt-7` | `--ed-space-7` (28px) |\n| `ed-mt-8` | `--ed-space-8` (32px) |\n| `ed-mt-9` | `--ed-space-9` (36px) |\n| `ed-mt-10` | `--ed-space-10` (40px) |\n| `ed-mt-11` | `--ed-space-11` (44px) |\n| `ed-mt-12` | `--ed-space-12` (48px) |\n| `ed-mt-13` | `--ed-space-13` (52px) |\n| `ed-mt-14` | `--ed-space-14` (56px) |\n| `ed-mt-15` | `--ed-space-15` (60px) |\n| `ed-mt-16` | `--ed-space-16` (64px) |\n\n### margin-block-end (bottom)\n\nUse `ed-mb-*` for block-end spacing.\n\n| Class Name | margin-block-end Value |\n| --- | --- |\n| `ed-mb-1` | `--ed-space-1` (4px) |\n| `ed-mb-2` | `--ed-space-2` (8px) |\n| `ed-mb-3` | `--ed-space-3` (12px) |\n| `ed-mb-4` | `--ed-space-4` (16px) |\n| `ed-mb-5` | `--ed-space-5` (20px) |\n| `ed-mb-6` | `--ed-space-6` (24px) |\n| `ed-mb-7` | `--ed-space-7` (28px) |\n| `ed-mb-8` | `--ed-space-8` (32px) |\n| `ed-mb-9` | `--ed-space-9` (36px) |\n| `ed-mb-10` | `--ed-space-10` (40px) |\n| `ed-mb-11` | `--ed-space-11` (44px) |\n| `ed-mb-12` | `--ed-space-12` (48px) |\n| `ed-mb-13` | `--ed-space-13` (52px) |\n| `ed-mb-14` | `--ed-space-14` (56px) |\n| `ed-mb-15` | `--ed-space-15` (60px) |\n| `ed-mb-16` | `--ed-space-16` (64px) |\n\n### margin-inline-start (left)\n\nUse `ed-ml-*` for inline-start spacing.\n\n| Class Name | margin-inline-start Value |\n| --- | --- |\n| `ed-ml-1` | `--ed-space-1` (4px) |\n| `ed-ml-2` | `--ed-space-2` (8px) |\n| `ed-ml-3` | `--ed-space-3` (12px) |\n| `ed-ml-4` | `--ed-space-4` (16px) |\n| `ed-ml-5` | `--ed-space-5` (20px) |\n| `ed-ml-6` | `--ed-space-6` (24px) |\n| `ed-ml-7` | `--ed-space-7` (28px) |\n| `ed-ml-8` | `--ed-space-8` (32px) |\n| `ed-ml-9` | `--ed-space-9` (36px) |\n| `ed-ml-10` | `--ed-space-10` (40px) |\n| `ed-ml-11` | `--ed-space-11` (44px) |\n| `ed-ml-12` | `--ed-space-12` (48px) |\n| `ed-ml-13` | `--ed-space-13` (52px) |\n| `ed-ml-14` | `--ed-space-14` (56px) |\n| `ed-ml-15` | `--ed-space-15` (60px) |\n| `ed-ml-16` | `--ed-space-16` (64px) |\n\n### margin-inline-end (right)\n\nUse `ed-mr-*` for inline-end spacing.\n\n| Class Name | margin-inline-end Value |\n| --- | --- |\n| `ed-mr-1` | `--ed-space-1` (4px) |\n| `ed-mr-2` | `--ed-space-2` (8px) |\n| `ed-mr-3` | `--ed-space-3` (12px) |\n| `ed-mr-4` | `--ed-space-4` (16px) |\n| `ed-mr-5` | `--ed-space-5` (20px) |\n| `ed-mr-6` | `--ed-space-6` (24px) |\n| `ed-mr-7` | `--ed-space-7` (28px) |\n| `ed-mr-8` | `--ed-space-8` (32px) |\n| `ed-mr-9` | `--ed-space-9` (36px) |\n| `ed-mr-10` | `--ed-space-10` (40px) |\n| `ed-mr-11` | `--ed-space-11` (44px) |\n| `ed-mr-12` | `--ed-space-12` (48px) |\n| `ed-mr-13` | `--ed-space-13` (52px) |\n| `ed-mr-14` | `--ed-space-14` (56px) |\n| `ed-mr-15` | `--ed-space-15` (60px) |\n| `ed-mr-16` | `--ed-space-16` (64px) |"
    }
  ]
}