CSS中使用margin属性定义网页边距

本文和大家重点讨论一下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的高度。
 

【编辑推荐】

1. margin-top属性的语法和特征
2. IE6.0对padding的解读分析
3. CSS margin 属性定义和用法
4. CSS中margin-top和margin-bottom属性使用说明
5. 技术分享 如何使用CSS控制超链接文字样式