代码示例：

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus®">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>Document</title>
  10.   <style type="text/css">
  11.     *{padding:0;margin:0;}
  12.     #div1{
  13.         width:100px;
  14.         height:100px;
  15.         background-color:red;
  16.         margin:0 auto;
  17.     }
  18.     #div2{
  19.         width:100px;
  20.         height:100px;
  21.         background-color:green;
  22.         /* margin-top:10px; *//* 元素与元素之间的距离 */
  23.         border:3px solid #000;
  24.         margin:10px auto 0px;
  25.     }
  26.     #div2 h1{
  27.         font-size:12px;
  28.         background-color:yellow;
  29.         margin-top:10px;/* 元素与元素之间的距离 */
  30.         /* padding-top:10px; *//* 增加了内容的宽高 */
  31.     }
  32.     #div2 span{
  33.         /* 行内元素没有具体的宽高 */
  34.         font-size:12px;
  35.         background-color:red;
  36.         display:inline-block;/* 将行内元素转化为行内块，有了具体的宽高 */
  37.         /* margin-top:10px; */
  38.         padding-top:10px;
  39.     }
  40.   </style>
  41.  </head>
  42.  <body>
  43.   <div id='div1'></div>
  44.   <div id='div2'>
  45.     <h1>我是标题</h1>
  46.     <span>我是行内元素</span>
  47.   </div>
  48.  </body>
  49. </html>

一、padding

1、语法结构

（1）padding-left:10px; 左内边距

（2）padding-right:10px; 右内边距

（3）padding-top:10px; 上内边距

（4）padding-bottom:10px; 下内边距

（5）padding：10px; 四边统一内边距

（6）padding:10px 20px; 上下、左右内边距

（7）padding:10px 20px 30px; 上、左右、下内边距

（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

2、可能取的值

（1）length  规定具体单位记的内边距长度

（2）%       基于父元素的宽度的内边距的长度

（3）auto    浏览器计算内边距

（4）inherit 规定应该从父元素继承内边距

3、浏览器兼容问题

（1）所有浏览器都支持padding属性

（2）任何版本IE都不支持属性值“inherit”

二、margin

1、语法结构

（1）margin-left:10px; 左外边距

（2）margin-right:10px; 右外边距

（3）margin-top:10px; 上外边距

（4）margin-bottom:10px; 下外边距

（5）margin:10px; 四边统一外边距

（6）margin:10px 20px; 上下、左右外边距

（7）margin:10px 20px 30px; 上、左右、下外边距

（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

2、可能取的值

（1）length  规定具体单位记的外边距长度

（2）%       基于父元素的宽度的外边距的长度

（3）auto    浏览器计算外边距

（4）inherit 规定应该从父元素继承外边距

3、浏览器兼容问题

（1）所有浏览器都支持margin属性

（2）任何版本IE都不支持属性值“inherit”

三、margin和padding的区别用图表示为

 例如：

在html文件的<body></body>之间写入如下代码:

<div id=”ID1″>
<h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1与ID2的margins在垂直方向折叠.</h1>
</div>

在与其外联的css文件中写入:

* {
padding:0;
margin:0;
}
#ID1 {

color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #F00;
}

代码解释:

1. 在html写入的代码表示, 在html中插入id分别为ID1和ID2的两个块级元素div, h1;

2. *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零;

3. #ID1{…}: 使id为ID1的元素div的背景颜色为#333, 字体颜色为#FFF, margin-top/bottom为10px;

4. #ID2{…}: 使id为ID2的元素h1的字体大小为14px, verdana字体, 行高为字体高的150%, 正常粗细. margin-top/bottom为30px, 边框为1px宽, 红色实线.

依据以上解释, 我们应该得到如下效果(Fig. 3):

即ID1的margin-top/bottom=ab=ef=10px;

ID2的margin-top/bottom=bc=de=30px;

但用浏览器打开html文件, 却得到Example4的效果, 如下图(Fig. 4):

即ab=cd=30px, ID1的margin-top/bottom=10px被折叠了, 而且ID1应有的margin黑色背景也一同被折叠消失了.

为什么会折叠: 造成以上现象的原因是, 我们在css中并没有声明id为ID1的元素div的height(高), 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离, 即Fig. 4中bc的长度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出现了Fig. 4中ab与cd之间的空白区域. 因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.

如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如div, h1, p等, 我们是不可能预先知道它的高是多少的, 因此在css文件中是不能常规通过声明元素的高来解决折叠问题.

我们需要在css文件中加入如下代码(红色部分):

#ID1 {

color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
padding-top:1px;
padding-bottom:1px;
}

或是：

#ID1 {

color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
border-top:1px solid #333;
border-bottom:1px solid #333;
}

CSS中 Padding和Margin两个属性的详细介绍和举例说明的更多相关文章

  1. CSS中padding、margin、bordor属性详解

    一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...

  2. CSS中padding、margin两个重要属性的详细介绍及举例说明

    http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, ...

  3. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

  4. css中padding与margin

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  5. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  6. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  7. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  9. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

随机推荐

  1. 第九章、import 和from ...import

    目录 第九章.import 和from ...import 一.import和 from ...import ... 二.import模块名 第九章.import 和from ...import 一. ...

  2. 怎么提高U盘传输文件的性能？

    U盘使用时间久了,其传输复制文件速度就可能会变得有些慢.出现这个问题的原因有很多,除了U盘本身的问题外,也可能会有电脑设置方面的因素在影响.好系统下面就来告诉大家解决U盘传输复制文件速度慢的几个小技巧 ...

  3. shell脚本中使用nohup执行命令不生效

    1 例如 !#/bin/bash nohup echo "hello world" 2 解决办法 加上 source /etc/profile 就好了 !#/bin/bash so ...

  4. 关于MySQL服务无法正常启动问题

    使用mysql的时候,突然查看服务列表也找不到mysql服务 解决办法: 一.首先打开CMD,切换到MySql安装目录的MySql Server →bin目录下 运行如下命令(具体试个人安装的MySq ...

  5. 使用函数rand5()来实现函数rand7()

    题目: 给定一个函数rand5(),该函数可以随机生成1-5的整数,且生成概率一样.现要求使用该函数构造函数rand7(),使函数rand7()可以随机等概率的生成1-7的整数. 思路: 很多人的第一 ...

  6. Jmeter （四） 关联

    关联: 实例:关联登录请求的 session,方便下次自动登录( 自我理解) 关联用户session 关联 例如 京东秒杀 1000个用户 同时秒杀 怎么模拟??  使用关联啊! 一.正则表达式提取器 ...

  7. c++中cin和cout的用法

    cin和cout是c++中的标准输入输出流. 一.cin cin的一般用法: cin>>变量a>>变量b>>变量c; cin会自动辨别变量的类型,如a可以是char ...

  8. eclipse 中离线安装activiti插件，报错“An error occurred while collecting items to be installed session context was:(...”

    eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context ...

  9. 转C++之stl::string写时拷贝导致的问题

    前几天在开发某些数据结构到文件的 Dump 和 Load 功能的时候, 遇到的一个 bug . [问题复现] 问题主要出在 Load 过程中,从文件读取数据的时候, 直接使用 fread 的去操作 s ...

  10. es聚合学习笔记

    聚合可以做什么? count avg filter and count 每月新增 top 是否存在不正常或不符合规则的数据 关键概念 Buckets group by 将数据按某种标准划分成不同集合 ...