本文和大家重点讨论一下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的高度。
【编辑推荐】
- margin-top属性的语法和特征
- IE6.0对padding的解读分析
- CSS margin 属性定义和用法
- CSS中margin-top和margin-bottom属性使用说明
- 技术分享 如何使用CSS控制超链接文字样式