微信小程序border padding margin

1.padding

定义元素边框与元素内容之间的空间。

可能的值

auto: 浏览器计算外边距
length：规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%：规定基于父元素的宽度的百分比的外边距。(padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变)
inherit：规定应该从父元素继承外边距。

取值节
指定一个，两个，三个或四个下列的值：

<长度> 可指定非负的固定宽度.
<百分比> 相对于包含块的宽度

指定一个值时 该值指定四个边的内边距
指定两个值时 第一个值指定上下两边的内边距第二个指定左右两边的内边距
指定三个值时 第一个指定上边的内边距.第二个指定左右两边第三个指定下边
指定四个值时分别为上右下左（顺时针顺序）

padding-top:20px;上内边距padding-right:30px;右内边距padding-bottom:30px;下内边距padding-left:20px;左内边距padding:1px四边统一内边距padding:1px1px上下,左右内边距padding:1px1px1px上,左右,下内边距padding:1px1px1px1px上,右,下,左内边距

注释：不允许使用负值。

2.margin

用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。
margin写法有4种，分别如下：

margin: 像素值1;
margin: 像素值1 像素值2;
margin: 像素值1 像素值2 像素值3;
margin: 像素值1 像素值2 像素值3 像素值4;

以上四个位置按顺序分别为：
margin-top–margin-right–margin-bottom–margin-left，即“上-右-下-左”。
其中需要注意的是后三种情况，当有像素值缺省时，浏览器会自动对缺省像素按照“bottom=top”和“left=right”的方法进行赋值。

“margin:20px;”表示四个方向的外边距都是20px

“margin:20px 40px;”表示top为20px，right为40px；由于bottom和left缺省，所以自动将它们分别设为20px和40px。转化为第4种为：“margin:20px40px 20px 40px;”。

“margin:20px 40px60px;”表示top为20px，right为40px，bottom为60px；由于left缺省，所以自动将它设为40px。转化为第4种写法为：“margin:20px 40px 60px 40px;”。

可能的值

auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

内外距离区别
padding就是内容与边框的空隙.
而margin 则是模块与模块的空隙.
下面图解:

3.border

边框是环绕内容区和填充的边界。
边框的属性有border-style、border-width和border-color以及综合了以上三类属性的快捷边框属性 border。

border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在 CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。
border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。
border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名。

在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

参考资料：《百度百科》