⼩程序界⾯设计⼊门课程-样式wxss中使⽤css课程-框模型-margin外边距框模型-margin外边距
基础⽤法
围绕在元素边框的空⽩区域是外边距。设置外边距会在元素外创建额外的“空⽩”。
设置外边距的最简单的⽅法就是使⽤ margin 属性，这个属性接受任何长度单位、百分数值甚⾄负值。
CSS margin 属性
设置外边距的最简单的⽅法就是使⽤ margin 属性。
margin 属性接受任何长度单位，可以是像素、英⼨、毫⽶或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下⾯的声明在 h1 元素的各个边上设置了 1/4 英⼨宽的空⽩：
h1 {margin : 0.25in;}
下⾯的例⼦为 h1 元素的四个边分别定义了不同的外边距，所使⽤的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
margin: top right bottom left
另外，还可以为 margin 设置⼀个百分⽐数值：
p {margin : 10%;}
百分数是相对于⽗元素的 width 计算的。上⾯这个例⼦为 p 元素设置的外边距是其⽗元素的 width 的 10%。
margin 的默认值是 0，所以如果没有为 margin 声明⼀个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在⽀持 CSS 的浏览器中，外边距会在每个段落元素的上⾯和下⾯⽣成“空⾏”。因此，如果没有为 p 元素声明外边距，浏览器可能会⾃⼰应⽤⼀个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
值复制
下⾯我们为您讲解如何使⽤值复制。
有时，我们会输⼊⼀些重复的值：
p {margin: 0.5em 1em 0.5em 1em;}
通过值复制，您可以不必重复地键⼊这对数字。上⾯的规则与下⾯的规则是等价的：
p {margin: 0.5em 1em;}
这两个值可以取代前⾯ 4 个值。这是如何做到的呢？CSS 定义了⼀些规则，允许为外边距指定少于 4 个值。规则如下：
如果缺少左外边距的值，则使⽤右外边距的值。
如果缺少下外边距的值，则使⽤上外边距的值。
如果缺少右外边距的值，则使⽤上外边距的值。
下图提供了更直观的⽅法来了解这⼀点：
换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制
得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后⼀个情况，如果只给定⼀个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
利⽤这个简单的机制，您只需指定必要的值，⽽不必全部都应⽤ 4 个值，例如：
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}  /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}  /* 等价于 1px 1px 1px 1px */
这种办法有⼀个⼩缺点，您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外边距和右外边距设置为 30 像素。在这种情况下，必须写作：
p {margin: 20px 30px 30px 20px;}
这样才能得到您想要的结果。遗憾的是，在这种情况下，所需值的个数没有办法更少了。
再来看另外⼀个例⼦。如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：
p {margin: auto auto auto 20px;}
同样的，这样才能得到你想要的效果。问题在于，键⼊这些 auto 有些⿇烦。如果您只是希望控制元素单边上的外边距，请使⽤单边外边距属性。
单边外边距属性
您可以使⽤单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使⽤ margin（需要键⼊很多 auto），⽽是可以采⽤以下⽅法：
p {margin-left: 20px;}
您可以使⽤下列任何⼀个属性来只设置相应上的外边距，⽽不会直接影响所有其他外边距：
margin-top
margin-right
margin-bottom
margin-left
⼀个规则中可以使⽤多个这种单边属性，例如：
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
当然，对于这种情况，使⽤ margin 可能更容易⼀些：
p {margin: 20px 30px 30px 20px;}
不论使⽤单边属性还是使⽤ margin，得到的结果都⼀样。⼀般来说，如果希望为多个边设置外边距，使⽤ margin 会更容易⼀些。不过，从⽂档显⽰的⾓度看，实际上使⽤哪种⽅法都不重要，所以应该选择对⾃⼰来说更容易的⼀种⽅法。
提⽰和注释
提⽰：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。⽽ Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个⽹站的边缘部分进⾏调整，并将之正确显⽰于 Opera 中，那么必须对 body 的padding 进⾏⾃定义。
⼩程序应⽤
Wxml代码
<!--外框就定义背景，内框定义个⼀个长宽都是100px带背景的。-->
<view class='cls1-a'>
<view class='cls1-b'>默认⽂本，不带外边距</view>
</view>
<view class='hr'></view><!--⾼度3的空⽩⾏-->
<view class='cls1-a'>
<view class='cls1-c'>默认⽂本，带外边距10px;</view><!--外边距定义10px-->  <!--要实现内框外⾯都是灰⾊见下⾯代码：外框定义内边距来实现-->
</view>
<view class='hr'></view><!--⾼度3的空⽩⾏-->
<view class='cls2-a'>
<view class='cls2-b'>默认⽂本</view>
</view>
Wxss代码
.cls1-a{ /*外框*/
background-color: gray;
}
.cls1-b{ /*内框*/
margin属性值可以为百分比background-color: gainsboro;
width: 100px;
height: 100px;
}
.hr{min-height: 3px;} /*⾼度3的空⽩⾏*/
.cls1-c{ /*内框*/
background-color: gainsboro;
width: 100px;
height: 100px;
margin: 10px;
}
.
cls2-a{ /*外框*/
background-color: gray;
padding: 10px; /*要实现内框外⾯都是灰⾊见：外框定义内边距来实现*/
}
.cls2-b{ /*内框*/
background-color: gainsboro;
width: 100px;
height: 100px;
}
效果如下图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。