CSS中Margin和Padding简单介绍

发表时间:2012-08-15 9:05 | 分类:其他知识 | 浏览:188 次

今天章郎虫对哈罗网吧的模板稍微修改了一下。在修改时需要用到css代码的添加或者修改,我学到了Margin和Padding两个属性的区别及简单用法。下面内容是我整理的有关这两个属性的用法,希望对朋友们有帮助。

1、Margin

Margin是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。Margin又包括margin-top,margin-right,margin-bottom和margin-left,分别表示上,右,下,左四个方向。你可以分别用这四个属性定义,也可以使用下面的简写规则。

margin: 10px 10px 10px 10px ;代表上右下左(顺时针方向)四个边距都是10px,也可以缩写成Margin: 10px;

当上下, 左右margin值分别一致, 可简写为:margin: 10px 10px;前一个10px代表上下margin值, 后一个10px代表左右margin值 。

当上下左右margin值均一致, 可简写为:margin: 10px;

如果边距为零,要写成Margin: 0px;。这里需要注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。Margin是透明元素,不能定义颜色。

2、Padding

Padding是指层的边框到层的内容之间的空白,主要控制块级元素内部,content与border之间的距离。Padding和Margin一样,也包括padding-top,padding-right,padding-bottom,padding-left四个属性。代码和简写都和Margin一样,可以参考以上的介绍。

Padding也是透明元素,不能定义颜色。

经过我简单的介绍,和我一样的童鞋们在看css文件代码时对Margin和Padding两个属性的意义和区别是不是清楚些了?

本文标签:,

本文链接:http://www.sijitao.net/958.html

本文版权虫虫开源所有,欢迎您在本博客中留下评论,如需转载原创文章请注明出处,谢谢!

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

一键脚本 SSH攻击 IP查询 博客历程 留言本 文章归档 网站地图 谷歌地图
托管于阿里云&七牛云. 已加入博客联盟. 浙ICP备13025236号.
Copyright © 2010-2016 虫虫开源 All Rights Reserved.