Margin

Apply spacing around elements (margin).

Usage:

@space m-*;
@space mt-*;
@space mb-*;
@space ml-*;
@space mr-*;
@space mx-*;
@space my-*;
@space mbl-*;
@space mbls-*;
@space mble-*;
@space mi-*;
@space mis-*;
@space mie-*;

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    space: {
      m: {
        property: "margin: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mt: {
        property: "margin-top: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mr: {
        property: "margin-right: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mb: {
        property: "margin-bottom: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      ml: {
        property: "margin-left: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mx: {
        property: `
					margin-left: <n><v><i>;
          margin-right: <n><v><i>;
        `,
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      my: {
        property: `
					margin-top: <n><v><i>;
          margin-bottom: <n><v><i>;
        `,
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mbl: {
        property: "margin-block: <n><v><i>",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mbls: {
        property: "margin-block-start: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mble: {
        property: "margin-block-end: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mi: {
        property: "margin-inline: <n><v><i>",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mis: {
        property: "margin-inline-start: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
      mie: {
        property: "margin-inline-end: <n><v><i>;",
        resolve: "spacing",
        themeKey: "spacingPixels",
        values: {},
      },
    },
  },
};

export default shilpConfig;