Centos系统下载大全 | Redhat系统下载大全 | Windows2012系统下载大全 | Windows2008系统下载大全| CMS教程 | 网站地图 51运维网-专注Linux/Unix系统安全运维!
当前位置:51运维网 > Web前端 > CSS > 正文

css padding与margin属性用法解析

时间:2015-04-08 09:59 来源:网络整理 作者:51ou.com 阅读:

margin:是设置元素与浏览器之间的边距,它有四个值:top, right, bottom, left,一个值被指定的话,就会用到其他三个值上;
如果两个值被指定的话,第一个值用于top和bottom,第二个值用于right和left;
如果三个值被指定的话,就会用到,top,left/right,bottom;
 
padding:是元素内容与元素的边距,它也有四个值:同上

CSS中Margin和Padding属性用法

Margin和Padding属性的用法,margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。

margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。

例子h2:
 

复制代码 代码示例:

h2{ font-size:1.5em;
background-color:#ccc; margin:1em;
padding:3em; }

元素四边可以设置的属性:margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottomandpadding-left

CSS盒模型BoxModel

width和height定义的是Content部分的宽度和高度,paddingbordermargin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。左右Margin加倍的问题当box为float时,IE6中box左右的margin会加倍

W3C定义的盒模式如下:
width和height定义的是Content部分的宽度和高度,paddingbordermargin的宽度依次加在外面。背景会填充padding和content部分。

但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同。

左右Margin加倍的问题

当box为float时,IE6中box左右的margin会加倍。比如:
 

复制代码 代码示例:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
""> <htmlxmlnshtmlxmlns="">
<head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>W3C定义的盒模式 - </title>
<style>
.outer{ width:500px;
height:200px; background:#000;
} .inner{
float:left; width:200px;
height:100px; margin:5px;
background:#fff; }
</style> </head>
<body> <divclassdivclass="outer">
<divclassdivclass="inner"></div> <divclassdivclass="inner"></div>
</div> </body>
</html>
 

左面的inner的左面margin明显大于5px。
这时候,定义inner的display属性为inline。

感谢您对【51运维网 http://www.51ou.com/】的支持,我们为您免费提供《css padding与margin属性用法解析》技术文章,《css padding与margin属性用法解析》详细使用和说明,有时《css padding与margin属性用法解析》可能不完善、敬请谅解!如果《css padding与margin属性用法解析》有错误请给我们留言,我们将尽快修复文章错误,如果您觉得本站不错,请分享给周围的朋友!谢谢!

顶一下
(0)
0%
踩一下
(0)
0%
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
验证码:点击我更换图片