概述
在一些小的项目中，前台样式还是需要自己来写的，这时候，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 { 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是按照顺时针的方向设置值的。
参考：http://www.divcss5.com/shili/s6.shtml
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 转载：http://www.cnblogs.com/wolf-sun/p/4026651.html |
