深入学习CSS中Margin和Padding属性用法

开发 前端
本文和大家重点讨论一下CSS的Margin和Padding属性的用法,margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。

CSS中的Margin和Padding属性有很多值得学习的地方,这里和大家分享一下Margin和Padding属性的用法,margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。

详细学习CSS的Margin和Padding属性

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

  例子h2:

  1. h2{  
  2. font-size:1.5em;  
  3. background-color:#ccc;  
  4. margin:1em;  
  5. padding:3em;  
  6. }  
  7.  

  元素四边可以设置的属性: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会加倍。比如:

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
  7. <title>www.webjx.com</title> 
  8. <style> 
  9. .outer{  
  10. width:500px;  
  11. height:200px;  
  12. background:#000;  
  13. }  
  14. .inner{  
  15. float:left;  
  16. width:200px;  
  17. height:100px;  
  18. margin:5px;  
  19. background:#fff;  
  20. }  
  21. </style> 
  22. </head> 
  23. <body> 
  24. <divclassdivclass="outer"> 
  25. <divclassdivclass="inner"></div> 
  26. <divclassdivclass="inner"></div> 
  27. </div> 
  28. </body> 
  29. </html> 
  30.  

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

【编辑推荐】

  1. CSS中padding和margin属性用法说明
  2. 实例解析CSS中padding、margin两个重要属性用法
  3. CSS padding属性定义边内补白方法探究
  4. IE6下使用CSS定义DIV高度行之有效的办法
  5. 技术前沿 一段JS代码轻松解决IE6-IE8的兼容性问题
责任编辑:佚名 来源: bitscn.com
相关推荐

2010-08-23 09:01:45

MarginPadding

2010-08-25 11:05:03

CSSpaddingmargin

2010-08-25 08:57:33

marginpadding

2010-08-23 15:51:54

paddingmargin

2010-08-19 11:32:10

CSSpaddingmargin

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-26 09:58:01

CSS clear

2010-09-16 10:57:15

paddingmarginCSS

2010-08-27 11:10:30

CSSmargin

2010-08-19 11:22:19

marginpadding

2010-09-02 09:09:38

display:inlCSS

2010-08-24 13:14:36

CSSmargin

2010-08-25 09:25:13

CSSmargin

2010-08-16 11:05:54

DIV+CSS

2010-09-03 10:43:05

CSSmargin

2010-08-23 13:40:46

CSSpadding-bot

2010-08-23 15:33:47

CSSpadding

2010-08-23 08:45:08

CSSpadding内边距

2010-08-19 13:43:07

marginpadding

2010-08-25 13:33:55

CSSpadding
点赞
收藏

51CTO技术栈公众号