UnoCSS间距与边距样式整理

UnoCSS官网地址

1. 基础语法结构

类别	前缀	示例类名	等效 CSS	说明
Margin	m-	m-4	{margin:1rem}	默认比例，1单位=0.25rem
	mx-	mx-auto	{ margin-left: auto; margin-right: auto; }	水平方向外边距
	my-	my-[20px]	{ margin-top:20px; margin-bottom:20px; }	垂直方向外边距
	mt-	mt-8	{ margin-top:2rem }	上外边距
	mr-	mr-[15%]	{margin-right:15%}	右外边距
	mb-	mb-0	{margin-bottom:0}	下外边距
	ml-	ml-auto	{margin-left:auto }	左外边距
‌Padding	p-	p-4	{ padding:1rem; }	四周内边距
	px-	px-4	{ padding-left:1rem; padding-right:1rem; }	水平方向外边距
	py-	py-[20px]	{ padding-top:20px; padding-bottom:20px; }	垂直方向外边距
	pt-	pt-8	{ padding-top:2rem; }	上内边距
	pr-	pr-[1%]	{ padding-left:1%; }	右内边距
	pb-	pb-0	{ padding-bottom:0; }	下内边距
	pl-	pl-auto	{padding-left:auto}	左内边距

‌2. 数值与单位规则‌

• ‌静态值‌：使用预设间隔单位（基于 spacing 配置，默认 rem 单位）

  <div class="m-4 p-2"> <!-- 默认单位：m=1rem, p=0.5rem --></div>

• ‌动态值‌：通过 [任意值] 指定自定义单位或精确数值

  <div class="mt-[10px] pr-[calc(100%-20px)]"> <!-- 动态边距 --></div>

‌3. 响应式与状态变体‌

• ‌响应式断点‌：通过前缀适配不同设备

  <div class="m-4 md:m-8 lg:mx-12"> <!-- 移动端到桌面端边距变化 --></div>

• ‌悬停状态‌：

  <button class="hover:ml-4">悬停时左外边距增大</button>

• ‌暗黑模式‌：

  <div class="dark:pr-6">暗黑模式下右内边距调整</div>

4. 特殊值示例‌

类名	等效 CSS	场景
m-auto	margin: auto;	水平居中布局
p-[calc(100%-8px)]	padding: calc(100% - 8px);	动态计算内边距
-ml-3	margin-left: -0.75rem;	负边距（元素重叠布局）

上一篇UnoCSS颜色样式