DIV+CSS：Margin和Padding属性[转载]
margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。
margin: 包括margin-top、margin-right、margin-bottom、margin-left，控制块级元素之间的距离，它们是透明不可见的。
Padding: 包括padding-top、padding-right、padding-bottom、padding-left，控制块级元素内部，content与border之间的距离。
例子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-bottom and padding-left
详细说明如下：
如果只提供一个，将用于全部的四条边；
如果提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
CSS盒模型 Box Model
Box Model: 任意一个块级元素均由content(内容)、padding、background(包括背景颜色和图片)、border(边框)、margin五个部分组成。
width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。左右 Margin加倍的问题当box为float时，IE6中box左右的margin会加倍
W3C定义的盒模式如下：
width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。
但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时，IE6中box左右的margin会加倍。比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.webjx.com</title>
<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
左面的inner的左面margin明显大于5px。
这时候，定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.webjx.com</title>
<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>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>
上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div 后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.webjx.com</title>
<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>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>
</div>
</body>
</html>
因此，外层css要定义overflow属性，内层最后要加上clear属性。
居中问题
需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
你可以这样定义使它横向居中：
#wrap {
width:760px;
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：
#outer {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。
DIV+CSS：Margin和Padding属性[转载]的更多相关文章
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- css margin的相关属性，问题及应用
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...
- HTML CSS——margin和padding的学习
你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...
- 各种div+css居中方式调整（转载）
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- border、margin、padding属性的区别
可以先看下这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml 本文参考:http://www.cnblogs.com/chinhr/arch ...
- CSS 内边距 padding 属性
CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...
- Android之Margin和Padding属性及支持的长度单位
做了个小软件后,终于把Margin和Padding弄清楚了,现总结如下: Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin ...
- CSS margin 外边距 属性的位置关系
padding:内边距 margin :外边距 margin:10px; 所有 4 个外边距都是 10px ******************************************* ma ...
随机推荐
- 微信Oauth2.0鉴权 40029 问题
前阵子出了这个问题,具体表现为,在获得用户授权时,有时会出现 40029 code 无效或超时 问题.在网上查询后,大多数人说是因为微信请求了两次url,导致第二次失效,而第一次被终止了. 现在找到了 ...
- Linux内核@系统组成与内核配置编译
Linux系统由什么组成? 由用户空间(应用程序+GNU C标准库)和内核空间(系统调用接口+内核+内核架构代码)组成. Linux内核到底是什么?以及组成. ARM的七种操作级别? 内核网络协议栈( ...
- Linq to Entity经验：表达式转换
http://www.cnblogs.com/ASPNET2008/archive/2012/10/27/2742434.html 最近一年的项目,我主要负责一些小型项目(就是指企业内部的小项目),在 ...
- Chrome Devtools简介
Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具.DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会.DevTools可以 ...
- Oracle RAC asm常用命令
在Oracle RAC环境下,使用grid帐号执行 运行asmcmd进入asm命令模式,如: [grid@oradb-node1 ~]$ asmcmd ASMCMD> ASMCMD> du ...
- python print 进度条的例子
def progress(width, percent): print "%s %d%%\r" % (('%%-%ds' % width) % (width * percent / ...
- linux for循环更改文件名字
#!/bin/bash # for a in CentOS-Base.repo CentOS-Debuginfo.repo CentOS-Media.repo CentOS-Vault.repo Ce ...
- linux tar
转自:http://www.cnblogs.com/qq78292959/archive/2011/07/06/2099427.html tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压 ...
- PHPCMS v9 超级安全防范教程！
一.目录权限设置很重要:可以有效防范黑客上传木马文件.如果通过 chmod 644 * -R 的话,php文件就没有权限访问了.如果通过chmod 755 * -R 的话,php文件的权限就高了. 所 ...
- JAVA源码走读（二）二分查找与Arrays类
给数组赋值:通过fill方法. 对数组排序:通过sort方法,按升序.比较数组:通过equals方法比较数组中元素值是否相等.查找数组元素:通过binarySearch方法能对排序好的数组进行二分查找 ...