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

开发 前端
你对CSS的Margin和Padding属性的用法是否了解,这里和大家简单分享一下,margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。

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

详细学习CSS的Margin和Padding属性

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

  例子h2:

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

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


 
"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>www.webjx.comtitle> 
<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> 
 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

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

外层box自动计算高度的问题

  根据W3C定义,没有float属性的外层box不会自动计算高度,要计算高度,必须在内层最后一个box加入clear:both。

  Opera、netscape、mozilla等不会计算外层box高度,但是微软ie6会自动计算外层高度。比如:


 
"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>www.webjx.comtitle> 
<style> 
.outer{  
width:600px;  
background:#000;  
}  
.inner1{  
float:left;  
width:200px;  
height:100px;  
margin:5px;  
background:red;  
}  
.inner2{  
float:left;  
width:200px;  
height:100px;  
margin:5px;  
background:yellow;  
}  
style> 
head> 
<body> 
<divclassdivclass="outer"> 
<divclassdivclass="inner1">div> 
<divclassdivclass="inner2">div> 
div> 
body> 
html> 
 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.

   上面的代码在ie中有黑色的背景,但是没有正确的计算上下的margin,在inner2下面加上一个包含clear:both属性的div后,可以正确计算margin。但是firefox中仍然没有黑色背景,通常的解决办法是定义一下clear:both这个div的高度,或者插入全角空格,这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性,同时使用clear:both,这样就不会增加额外的高度了。如下:


 
"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>www.webjx.comtitle> 
<style> 
.outer{  
width:600px;  
background:#000;  
overflow:auto;  
}  
.inner1{  
display:inline;  
float:left;  
width:200px;  
height:100px;  
margin:5px;  
background:red;  
}  
.inner2{  
display:inline;  
float:left;  
width:200px;  
height:100px;  
margin:5px;  
background:yellow;  
}  
.clear{  
clear:both;  
}  
style> 
head> 
<body> 
<divclassdivclass="outer"> 
<divclassdivclass="inner1">div> 
<divclassdivclass="inner2">div> 
<divclassdivclass="clear">div> 
div> 
body> 
html> 
 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.

   因此,外层css要定义overflow属性,内层最后要加上clear属性。#p#

居中问题

  需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:
  你可以这样定义使它横向居中:

#wrap{  
width:760px;/*修改为你的层的宽度*/  
margin:0auto;  
}  
 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

  但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:在外层用text-align属性。就象这样:

#outer{  
text-align:center;  
}  
#wrap{  
width:760px;/*修改为你的层的宽度*/  
margin:0auto;  
text-align:left;  
}  
 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

  第一个#outer的text-align:center;规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中),第二个text-align:left;是将#warp中的文字居左。

  因此,在有居中元素的css中,外层css要定义text-align:center属性,内层居中用margin:xautoxauto定义,并重新定义text-align。

【编辑推荐】

  1. CSS中padding-top和padding-left属性的区别
  2. 使用CSS margin属性轻松设置外边距
  3. 名词释义 解析padding-top属性用法
  4. CSS教程:详解margin和padding属性应用场合
  5. 实现IE6、IE7、IE8多版本浏览器共存的五种方法

 

责任编辑:佚名 来源: wzsky.net/
相关推荐

2010-08-19 12:55:55

CSSMarginPadding

2010-08-25 11:05:03

CSSpaddingmargin

2010-08-25 08:57:33

marginpadding

2010-08-26 09:58:01

CSS clear

2010-08-19 11:32:10

CSSpaddingmargin

2010-08-23 15:51:54

paddingmargin

2010-09-08 11:06:49

CSSpaddingmargin

2010-09-02 09:09:38

display:inlCSS

2010-08-16 11:05:54

DIV+CSS

2010-08-25 09:25:13

CSSmargin

2010-08-27 11:10:30

CSSmargin

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 15:33:47

CSSpadding

2010-08-24 08:56:22

CSSpadding

2010-09-16 10:57:15

paddingmarginCSS

2010-08-25 13:33:55

CSSpadding

2010-08-19 11:22:19

marginpadding

2010-08-25 10:21:49

CSSmargin

2010-08-19 13:43:07

marginpadding

2010-08-30 11:34:32

csspadding
点赞
收藏

51CTO技术栈公众号