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

开发 前端
CSS中的margin属性定义网页边距的方法你是否了解,margin属性共有margin-top,margin-right,margin-bottom和margin-left四种参数,这里看一下它如何定义网页边距。

这里向大家描述一下如何使用margin属性定义网页边距,当需要使用CSS中的margin属性分别定义网页的顶、右、底、左时,用法有2种,具体内容请看下文详细介绍。

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

当他们要分别定义网页的顶、右、底、左时,用法有2种,他们分别为:

  margin:top-value、right-value、bottom-value、left-value;(顺序是固定的上右下左,顺时针。)

  1.   margin-top:value;  
  2.  
  3.   margin-right:value;  
  4.  
  5.   margin-bottom:value;  
  6.  
  7.   margin-left:value;  

  当他们定义的网页顶、右、底、左边距是等同时,用这种方法:
  
margin:value;

  例如:margin:10px20px20px40px;这个说明网页的上右下左边距分别为10、20、20、40.
  或者也可以写成这样:

  1.   margin-top:10px;  
  2.  
  3.   margin-right:20px;  
  4.  
  5.   margin-bottom:20px;  
  6.  
  7.   margin-left:40px;  
  8.  

效果是一样的。

一般常用举例:  

  1. <styletypestyletype="text/css"> 
  2.   <!--  
  3.   #header{  
  4.   height:120px;  
  5.   width:960px;  
  6.   background-image:url(headPic.gif);  
  7.   background-repeat:no-repeat;  
  8.   margin:0px0px5px0px;  
  9.   }  
  10.   --> 
  11.   </style> 
  12.   <dividdivid="header"></div><!--网站的头部--> 
  13.   <dividdivid="nav"></div><!--网站的导航--> 
  14.   <dividdivid="content"></div><!--网站内容--> 
  15.   <dividdivid="footer"></div><!--网站底部--> 

  上面的代码就是我们经常用到的DIV+CSS做的网站让他的头部和导航之间有5px的高度。

【编辑推荐】

  1. Chroma属性实现CSS滤镜透明效果
  2. CSS Sprites图片切割术与图片优化
  3. CSS中margin:0auto;无法居中解决方法
  4. CSS规范化命名通用命名规则
  5. CSS分栏布局的两种方法:绝对定位和浮动
责任编辑:佚名 来源: examda.com
相关推荐

2010-08-25 10:10:30

CSSmargin

2010-09-06 11:02:59

CSSmargin

2010-08-23 08:53:04

CSSmargin外边距

2010-08-25 09:25:13

CSSmargin

2010-09-03 10:31:31

CSSmargin

2010-08-24 13:14:36

CSSmargin

2010-09-08 14:00:08

marginCSS

2010-09-03 10:43:05

CSSmargin

2010-08-27 11:10:30

CSSmargin

2010-08-25 11:23:31

IE6margin

2010-08-26 10:08:50

CSSmargin

2010-08-25 10:21:49

CSSmargin

2010-08-25 09:30:56

marginCSS

2010-08-30 12:54:59

CSSmargin

2010-08-25 08:57:33

marginpadding

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-27 09:02:22

IE6margin双倍

2010-08-31 08:51:58

marginCSS

2010-08-19 11:32:10

CSSpaddingmargin

2010-08-23 15:51:54

paddingmargin
点赞
收藏

51CTO技术栈公众号