css padding与margin属性用法解析_css教程

css padding与margin属性用法解析: 发布时间：2020-11-10编辑：脚本学堂

有关css中padding与margin属性的用法，深入学习CSS中Margin和Padding属性用法。

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" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 

<head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 

<title>W3C定义的盒模式 - www.jb200.com</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。

上一篇：css垂直居中五种方法
下一篇：css padding margin属性用法示例

与 css padding与margin属性用法解析有关的文章

本文标题：css padding与margin属性用法解析
本页链接：http://www.jb200.com/article/30000.html

浏览排行

栏目分类

热点文章

css padding与margin属性用法解析