[HTMLCSS]margin属性⽤法
概述
在⼀些⼩的项⽬中，前台样式还是需要⾃⼰来写的，这时候，margin在布局中还是有⼀定的地位的。上篇⽂章中介绍的盒⼦模型中，就有margin的存在。
margin
margin可以⽤来设置css块级元素之间的距离。
* {
/*距左元素块距离（设置距左内边距）*/
margin-left: 0px;
/*距右元素块距离（设置距右元素块距） */
margin-right: 0px;
/*底元素块距离（设置距低（下）元素块距）*/
margin-bottom: 0px;
/*距头顶(上)元素块距离（设置距顶部元素块距离）*/
margin-top: 0px;
}
除了使⽤像素外，还可以使⽤百分⽐的⽅式
1        * {
2/*距离左元素块距10像素，可跟百分⽐如（margin-left:10%;  距离左元素块10%的距离）*/
3            margin-left: 10px;
4/*距离右边元素块距10像素，可跟百分⽐如（margin-right:10%; 距离右边元素块10%的距离） */
5            margin-right: 10px;
6/*距离低边元素块距10像素，可跟百分⽐如（margin-bottom:10%; 距离底边元素块10%的距离）*/
7            margin-bottom: 10px;
8/*距离顶边元素块距10像素，可跟百分⽐如（margin-top:10%; 距离顶边元素块10%的距离）*/
9            margin-top: 10px;
10        }
可以有更简单的⽅式来写：
1      div {
margin属性值可以为百分比2            margin: 10px;
3/*意思就是上下左右元素块距离就是10px（10像素）等于*/
4/*margin-top: 10px;
5            margin-bottom: 10px;
6            margin-left: 10px;
7            margin-right: 10px;*/
8            margin: 5px 10px;
9/*意思上下元素块距离为5px，左右的元素块距离为10px，等于*/
10/*margin-top: 5px;
11            margin-bottom: 5px;
12            margin-left: 10px;
13            margin-right: 10px;
14*/
15            margin: 5px 6px 7px;
16/*意思上元素块距离5px，下元素块距离为7PX，左右元素块距离为6px，等于*/
17/*margin-top: 5px;
18            margin-bottom: 7px;
19            margin-left: 6px;
20            margin-right: 6px;*/
21            margin: 5px 6px 7px 8px;
22/*意思上元素块为5px，右元素块距离为6px ，下元素块距离为7px，左元素块距离8px，等于*/
23/*margin-top: 5px;
24            margin-right: 6px;
25            margin-bottom: 7px;
26            margin-right: 8px;*/
27        }
其中：margin：5px 6px 7px 8px是按照顺时针的⽅向设置值的。
参考：

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