[HTMLCSS]margin属性用法

概述概述在一些小的项目中，前台样式还是需要自己来写的，这时候，margin在布局中还是有一定的地位的。上篇文章中介绍的盒子模型中，就有margin的存在。marginmargin可以用来设置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 概述

margin

{ :; :; :; :; }

{ :; :; :; :; }

{ :; :; :; :; }

参考：href="http://www.divCSS5.com/shili/s6.sHTML">http://www.divCSS5.com/shili/s6.sHTML

总结

以上是内存溢出为你收集整理的[HTML/CSS]margin属性用法全部内容，希望文章能够帮你解决[HTML/CSS]margin属性用法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。