概述

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

margin

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

* {/*距左元素塊距離（設(shè)置距左內(nèi)邊距）*/margin-left: 0px;/*距右元素塊距離（設(shè)置距右元素塊距） */margin-right: 0px;/*底元素塊距離（設(shè)置距低（下）元素塊距）*/margin-bottom: 0px;/*距頭頂(上)元素塊距離（設(shè)置距頂部元素塊距離）*/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是按照順時針的方向設(shè)置值的。
參考：http://www.divcss5.com/shili/s6.shtml

總結(jié)

以上是生活随笔為你收集整理的[HTML/CSS]margin属性用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。