[HTML/CSS]margin屬性用法

概述

在一些小的項目中，前台樣式還是需要自己來寫的，這時候，margin在布局中還是有一定的地位的。上篇文章中介紹的盒子模型中，就有margin的存在。

margin

margin可以用來設置css塊級元素之間的距離。

        * {
            /*距左元素塊距離（設置距左內邊距）*/
            margin-left: 0px;
            /*距右元素塊距離（設置距右元素塊距） */
            margin-right: 0px;
            /*底元素塊距離（設置距低（下）元素塊距）*/
            margin-bottom: 0px;
            /*距頭頂(上)元素塊距離（設置距頂部元素塊距離）*/
            margin-top: 0px;
        }

除了使用像素外，還可以使用百分比的方式

        * {
            /*距離左元素塊距10像素，可跟百分比如（margin-left:10%;   距離左元素塊10%的距離）*/
            margin-left: 10px;
            /*距離右邊元素塊距10像素，可跟百分比如（margin-right:10%; 距離右邊元素塊10%的距離） */
            margin-right: 10px;
            /*距離低邊元素塊距10像素，可跟百分比如（margin-bottom:10%; 距離底邊元素塊10%的距離）*/
            margin-bottom: 10px;
            /*距離頂邊元素塊距10像素，可跟百分比如（margin-top:10%; 距離頂邊元素塊10%的距離）*/
            margin-top: 10px;
        }

可以有更簡單的方式來寫：

       div {
            margin: 10px;
            /*意思就是上下左右元素塊距離就是10px（10像素）等於*/
            /*margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 10px;
            margin-right: 10px;*/
            margin: 5px 10px;
            /*意思上下元素塊距離為5px，左右的元素塊距離為10px，等於*/
            /*margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 10px;
            margin-right: 10px;
          */
            margin: 5px 6px 7px;
            /*意思上元素塊距離5px，下元素塊距離為7PX，左右元素塊距離為6px，等於*/
            /*margin-top: 5px;
            margin-bottom: 7px;
            margin-left: 6px;
            margin-right: 6px;*/
            margin: 5px 6px 7px 8px;
            /*意思上元素塊為5px，右元素塊距離為6px ，下元素塊距離為7px，左元素塊距離8px，等於*/
            /*margin-top: 5px;
            margin-right: 6px;
            margin-bottom: 7px;
            margin-right: 8px;*/
        }

其中：margin：5px 6px 7px 8px是按照順時針的方向設置值的。
參考：http://www.divcss5.com/shili/s6.shtml