如何在UnoCSS中自定义margin与padding的数值？

方法一：直接自定义CSS工具类 #

如果是自己维护工具类样式，直接覆盖或新增对应类的样式即可，示例如下：

/* 自定义margin工具类（20px） */
.mr { margin-right: 20px; }
.mt { margin-top: 20px; }
.ml { margin-left: 20px; }
.mb { margin-bottom: 20px; }
.my { margin: 20px 0; }
.mx { margin: 0 20px; }

/* 自定义padding工具类（18px） */
.pr { padding-right: 18px; }
.pt { padding-top: 18px; }
.pl { padding-left: 18px; }
.pb { padding-bottom: 18px; }
.py { padding: 18px 0; }
.px { padding: 0 18px; }

方法二：用CSS变量统一管理 #

通过CSS变量可以实现全局统一控制，后续修改数值只需调整变量值：

/* 根元素定义全局变量 */
:root {
  --margin-base: 20px;
  --padding-base: 18px;
}

/* 基于变量定义margin工具类 */
.mr { margin-right: var(--margin-base); }
.mt { margin-top: var(--margin-base); }
.ml { margin-left: var(--margin-base); }
.mb { margin-bottom: var(--margin-base); }
.my { margin: var(--margin-base) 0; }
.mx { margin: 0 var(--margin-base); }

/* 基于变量定义padding工具类 */
.pr { padding-right: var(--padding-base); }
.pt { padding-top: var(--padding-base); }
.pl { padding-left: var(--padding-base); }
.pb { padding-bottom: var(--padding-base); }
.py { padding: var(--padding-base) 0; }
.px { padding: 0 var(--padding-base); }

方法三：Tailwind CSS框架下自定义 #

如果你用Tailwind CSS，可在配置文件中扩展间距值，示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      spacing: {
        'custom-m': '20px', // 对应m-custom-m、mt-custom-m等类名
        'custom-p': '18px', // 对应p-custom-p、pb-custom-p等类名
      },
    },
  },
}

之后就可以使用mt-custom-m（上margin为20px）、pb-custom-p（下padding为18px）这类类名。

内容的提问来源于stack exchange，提问作者laterday