This utility plugin adds a series of css classes that allow easy addition of set padding and margin to any element.
此实用程序插件添加了一系列CSS类，可轻松将设置的填充和边距添加到任何元素。
For basic use, the classes follow the format of [margin / padding][location letter: all, top, right, bottom, left, vertical, horizontal][amount: none, small, medium, large, extra large (
对于基本用途，这些类遵循[margin / padding] [位置字母：全部，顶部，右侧，底部，左侧，垂直，水平]的格式。[数量：无，小，中，大，特大（
0.5em, 1em, 2em, 4em)]
0.5em，1em，2em，4em）]
Also in the basic classes are percentages, taking the place of the last letter in the format [p][percentage] e.g.
在基本类别中，百分比也以[p] [percentage]格式代替最后一个字母，例如
p7-5 for 7.5% or p15 for 15%.
p7-5占7.5％，p15占15％。
Examples of Basic Classes:
基本类示例： - man > margin all none = margin: 0px;
- man> margin all none = margin：0px;
- prl > padding right large = padding-right: 2em;
- prl>右侧填充大=右侧填充2em;
- mvp5 > margin vertical 5% = margin: 5% 0;
- mvp5>垂直边距5％=边距：5％0;
Additional utility classes – First / Last child, Child / Sub
其他实用程序类–第一个/最后一个孩子，Child / Sub To add selective classes for adding margin / padding to the first / last child, any child, or any sub-element of the required element, simply add '', '', '', or
要添加选择类以为所需元素的第一个/最后一个子元素，任何子元素或任何子元素添加边距/填充，只需添加“ last-”，“ first-”，“ child-”或
'' to the beginning of the basic classes.
''到基本类的开头。
Examples of Child Classes
子类的示例 - last-mhxl > last-child margin horizontal extra large = last-mhxl :last-child { margin: 0 4em;
- last-mhxl>上一个孩子的边距水平超大= last-mhxl：last-child {边距：0 4em;
}
}
- last-pbn > last-child padding bottom none = last-pbn :last-child { padding-bottom: 0;
- last-pbn>最后一个孩子的填充底部无= last-pbn：last-child {padding-bottom：0;
}
}
- first-mtm > first-child margin top medium = first-mtm :first-child { margin-top: 2em;
- first-mtm>第一个孩子的边际最高媒介= first-mtm：first-child {margin-top：2em;
}
}
- child-mal > child margin all large = child-mal > * { margin: 4em;
- child-mal>儿童保证金全部大= child-mal> * {保证金：4em;
}
}
- sub-php5 > sub elements padding horizontal 5 percent = sub-php5 * { padding: 0 5%;
- sub-php5>子元素水平填充5％= sub-php5 * {padding：0 5％;
}
}
Additional utility classes – Responsive margin / padding
其他实用程序类–响应边距/填充 You can also apply the margin / padding required to certain screen widths, ranging from xl (min: 1200px) to xs (max: 480px).
您还可以将所需的边距/填充应用于某些屏幕宽度，范围从xl（最小：1200像素）到xs（最大：480像素）。
To use these responsive classes, add -[screen-size] to the end of the basic classes.
要使用这些响应式类，请在基本类的末尾添加-[screen-size]。
Examples of Responsive Classes
响应类示例 - mrm-lg > margin right medium, large screen = (max-width: 1199px) and (min-width: 980px) margin-right: 2em;
- mrm-lg>右边距中等，大屏幕=（最大宽度：1199px）和（最小宽度：980px）右边距：2em;
- pas-xs > padding all small, xsmall screen = (max-width: 480px) padding: 0.5em;
- pas-xs>填充所有小xsmall屏幕=（最大宽度：480px）填充：0.5em;
- mhp15-md > margin horizontal 15%, medium screen = (max-width: 979px) and (min-width: 768px) margin-left: 15%;
- mhp15-md>边距水平15％，中屏=（最大宽度：979px）和（最小宽度：768px）左边距：15％;
margin-right: 15%;
保证金率：15％;
Full Table of Options
完整选项列表 [margin / padding]
[边距/填充]
m = margin
m =保证金
p = padding
p =填充
[location]
[位置]
a = all
a =全部
t = top
t =顶部
r = right
r =正确
b = bottom
b =底部
l = left
l =左
v = vertical (top + bottom)
v =垂直（顶部+底部）
h = horizontal (left + right)
h =水平（左+右）
[amount]
[金额]
s = small (0.5em)
s =小（0.5em）
m = medium (1.0em)
m =中（1.0em）
l = large (2.0em)
l =大（2.0em）
xl = extra large (4.0em)
xl =特大（4.0em）
p5 = 5 percent (5.0%)
p5 = 5％（5.0％）
p7-5 = 7.5 percent (7.5%)
p7-5 = 7.5％（7.5％）
p10 = 10 percent (10.0%)
p10 = 10％（10.0％）
p12-5 = 12.5 percent (12.5%)
p12-5 = 12.5％（12.5％）
p15 = 15 percent (15.0%)
p15 = 15％（15.0％）
[first / last] (prefix)
[第一个/最后一个]（前缀）
first- = > :first-child
first- =>：第一个孩子
last- = > :last-child
last- =>：last-child
[child / sub] (prefix)
[子/子]（前缀）
child- = > *
child- => *
sub- = *
子= *
[screen-size] (suffix)
[屏幕尺寸]（后缀）
-xs = max-width: 480px
-xs =最大宽度：480px
-sm = max-width: 767px and min-width: 481px
-sm =最大宽度：767像素，最小宽度：481像素
-md = max-width: 979px and min-width: 768px
-md =最大宽度：979像素，最小宽度：768像素
-lg = max-width: 1199px and min-width: 980px
-lg =最大宽度：1199px，最小宽度：980px
-xl = min-width: 1200px
-xl =最小宽度：1200px
Additional utility classes – Boxshadow
其他实用程序类– Boxshadow Using the boxshadow utility classes, you can quickly add a boxshadow to divs and other elements.
使用boxshadow实用程序类，可以快速将boxshadow添加到div和其他元素。
The format of the utility classes is as follows: shadowout-[direction][blur]-[shadow opacity].
实用程序类的格式如下：shadowout- [direction] [blur]-[shadow opacity]。
Examples of Boxshadow
Boxshadow的示例 - shadowout-nm-medium > no direction, medium blur, medium opacity = box-shadow: 0 0 .15em 0 rgba(0,0,0,0.27);
- shadowout-nm-medium>无方向，中等模糊，中等不透明度=盒子阴影：0 0 .15em 0 rgba（0,0,0,0.27）;
- shadowout-brm-dark > bottom-right direction, medium blur, dark opacity = box-shadow: .15em .15em .3em 0 rgba(0,0,0,0.54);
- shadowout-brm-dark>右下方向，中等模糊，深色不透明=盒子阴影：.15em .15em .3em 0 rgba（0,0,0,0.54）;
Options for Boxshadow utility
Boxshadow实用程序的选项 [direction]
[方向]
all directions shift the shadow by .15em
各个方向将阴影移.15em
n = none
n =无
t = top
t =顶部
b = bottom
b =底部
l = left
l =左
r = right
r =正确
tl = top-left
tl =左上
tr = top-right
tr =右上
bl = bottom-left
bl =左下角
br = bottom-right
br =右下角
[blur]
[模糊]
s = small (.15em)
s =小（.15em）
m = medium (.3em)
m =中（.3em）
l = large (.6em)
l =大（.6em）
[shadow opacity]
[阴影不透明度]
-light = light (0.135 opacity)
-light =光线（不透明度0.135）
-medium = medium (0.27 opacity)
-medium =中（不透明度为0.27）
-dark = dark (0.54 opacity)
-dark =深色（不透明度0.54）
