Margin & Padding 外边距和内边距
margin为外边距，padding为内边距；通过_m[-*]样式类独立设置元素的外边距，支持边距大小和边距位置；通过_p[-*]样式类独立设置元素的内边距，支持边距大小和边距位置。
前言
margin为外边距，padding为内边距，本框架定义了一组边距类名，通过类名可以定义元素的内外边距。简单使用_m样式类即可实现14px的外边距；使用_p样式类即可实现14px的内边距。
- 输出
- HTML
-
14px的外边距（margin）14px的内边距（padding）
-
边距大小
内边距和外边距均提供相同的边距样式组。
- _m-xxs/_p-xxs：4px边距
- _m-xs/_p-xs：8px边距
- _m-sm/_p-sm：14px边距
- _m-md/_p-md：22px边距
- _m-lg/_p-lg：28px边距
- _m-xl/_p-xl：38px边距
- _m-xxl/_p-xxl：44px边距
- 输出
- HTML
-
_m-xxs_m-sm_m-xl_p-xxs_p-sm_p-xl
-
边距位置
默认内外边距分布四周，同时我们还提供6个边框位置，分别如下：
- _m-l：左外边距
- _m-r：右外边距
- _m-t：上外边距
- _m-b：下外边距
- _m-lr：左右外边距
- _m-tb：上下外边距
- _p-l：左内边距
- _p-r：右内边距
- _p-t：上内边距
- _p-b：下内边距
- _p-lr：左右内边距
- _p-tb：上下内边距
- 输出
- HTML
-
内容内容
-
Margin关联类名
不同类型的类名可叠加使用，例如_m-xs _m-l表示左侧8px的外边距。
| 类名 | 说明 | 举例 |
|---|---|---|
| _m | 默认14px外边距 | <div class="_m"></div> |
| _m-0 | 无外边距，margin:0 | - |
| _m-[xxs~xxl] | 外边距尺寸xxs~xxl（4px~44px） | - |
| _m-l | 左侧外边距 | - |
| _m-r | 右侧外边距 | - |
| _m-t | 上方外边距 | - |
| _m-b | 下方外边距 | - |
| _m-lr | 左右外边距 | - |
| _m-tb | 上下外边距 | - |
Padding关联类名
不同类型的类名可叠加使用，例如_p-xs _p-l表示左侧8px的内边距。
| 类名 | 说明 | 举例 |
|---|---|---|
| _p | 默认14px内边距 | <div class="_p"></div> |
| _p-0 | 无内边距，margin:0 | - |
| _p-[xxs~xxl] | 内边距尺寸xxs~xxl（4px~44px） | - |
| _p-l | 左侧内边距 | - |
| _p-r | 右侧内边距 | - |
| _p-t | 上方内边距 | - |
| _p-b | 下方内边距 | - |
| _p-lr | 左右内边距 | - |
| _p-tb | 上下内边距 | - |
