[HTML/CSS]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 {
 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

posted @ 2014-10-15 16:21  wolfy  阅读(7295)  评论(2)  编辑  收藏  举报