本文和大家重點討論一下CSS中如何使用margin屬性定義網頁邊距,margin屬性包括margin-top,margin-right,margin-bottom,margin-left等。
CSS中margin屬性定義網頁邊距
margin屬性包括margin-top,margin-right,margin-bottom,margin-left,margin。
◆當他們要分別定義網頁的頂、右、底、左時用法有2種,他們分別為:
margin:top-valueright-valuebottom-valueleft-value;(順序是固定的上右下左,順時針。)
- margin-top:value;
- margin-right:value;
- margin-bottom:value;
- margin-left:value;
◆當他們定義的網頁頂、右、底、左邊距是等同時,用這種方法:
margin:value;
例如:margin:10px20px20px40px;這個說明網頁的上右下左邊距分別為10、20、20、40.
或者也可以寫成這樣:
- margin-top:10px;
- margin-right:20px;
- margin-bottom:20px;
- margin-left:40px;
效果是一樣的。
一般常用舉例:
- <styletypestyletype="text/CSS">
- <!--
- #header{
- height:120px;
- width:960px;
- background-image:url(headPic.gif);
- background-repeat:no-repeat;
- margin:0px0px5px0px;
- }
- -->
- </style>
- <dividdivid="header"></div><!--網站的頭部-->
- <dividdivid="nav"></div><!--網站的導航-->
- <dividdivid="content"></div><!--網站內容-->
- <dividdivid="footer"></div><!--網站底部-->
上面的代碼就是我們經常用到的div+CSS做的網站讓他的頭部和導航之間有5px的高度。
【編輯推薦】