一、padding——内边距（内填充）

　　1.1、padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

　　

    <style>

        div.outer{

            width: 400px;

            height: 400px;

            border: 2px solid #000;

        }

        div.inner{

            width: 200px;

            height: 200px;

            background-color:red ;

            padding: 50px;

        }

    </style>

    <body>

        <div class="outer">

            <div class="inner"></div>

        </div>

    </body>

　　　运行效果图：　　　　

　　1.2、padding 属性也可以按照方向分开来写。

    <style>

        .outer {

          width:400px;

          height:400px;

          border: 2px solid #000;

        }

        .inner {

          width:200px;

          height:200px;

          background-color:green;

          /*padding:40px 80px;运行效果是一样的*/

          padding-top:40px;

          padding-right: 80px;

          padding-bottom: 40px;

          padding-left: 80px;

        }

    </style>

    <body>

        <div class="outer">

            <div class="inner"></div>

        </div>

    </body>

　　　　运行效果图：

　　1.3、padding属性值可以有四种形式：

　　　　　　

二、margin——外边距

　　2.1、margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

    <style>

        div.outer{

            width: 400px;

            height: 400px;

            border: 2px solid #000;

        }

        div.inner{

            width: 200px;

            height: 200px;

            background-color:green ;

            margin: 50px;

        }    

    </style>

    </head>

    <body>

        <div class="outer">

            <div class="inner"></div>

        </div>

    </body>

　　　　代码运行效果如下图:

　　2.2、margin属性也可以按照方向分开来写。

    <style>

        div.outer{

            width: 400px;

            height: 400px;

            border: 2px solid #000;

        }

        div.inner{

            width: 200px;

            height: 200px;

            background-color:green ;

            /*margin:40px 80px 20px 40px;运行效果是一样的*/

                    margin-top:40px;

                    margin-right: 80px;

                    margin-bottom: 20px;

                    margin-left: 80px;

        }    

    </style>

    </head>

    <body>

        <div class="outer">

            <div class="inner"></div>

        </div>

    </body>

　　代码运行效果如下图:

　　2.3、margin属性值可以有四种形式：

　　　　

三、内边距和外边距的区别

　　　　1、margin和padding都是盒模型(Box Model)的重要元素，二者都是用来处理与其他盒子的距离关系进行布局的。

　　　　2、形象的介绍，夏季女生在地铁遇到色狼变态时有发生，如果选择穿上羽绒服与色狼保持距离，那就是padding内边距，如果选择移动自己的位置远离色狼，那就是margin外边距。

　　　　3、就与borde边框的位置来看，pading在border边框内，margin在border边框外。

　　　　4、padding内边距会改变盒模型的大小（即宽高），margin则不会。

　　　　

　　　　5、margin内边距用负值，pading不可以。

　　　　

<style>

    .box{float:left;border:10px solid #000;margin:20px;}

    .box div{width:100px;height:100px;background:red;}

    .div1{margin-top:-30px;}

    .div2{margin-left:-30px;}

    .div3{margin-bottom:-30px;}

    .div4{margin-right:-30px;}

</style>

<body>

    <div class="box">

        <div class="div1"></div>

    </div>

    <div class="box">

        <div class="div2"></div>

    </div>

    <div class="box">

        <div class="div3"></div>

    </div>

    <div class="box">

        <div class="div4"></div>

    </div>

</body>

　　　　代码运行效果图如下：

　　　　6、背景图片会显示在padding内边距上，不会显示在margin外边距上。

    <style>

        .box{

            width:320px;

            border: 10px solid #000000;

        }

        div{

            width: 200px;

            height: 200px;

            margin: 40px;

            padding: 20px;

            border: 1px solid red;

            background: url(img/2mail.jpg) no-repeat;

        }

    </style>

    <body class="box">

        <div class="box">

            <div>

                <img src="img/love.jpg" alt="" />

            </div>

        </div>

    </body>

　　　　代码运行效果图如下：

四、兼容

　　4.1、IE浏览器不支持padding内边距和margin外边距的“inherit”继承属性值。

　　 4.2、外边距合并

　　　　4.2.1、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并为最大的数值，请看下图：

　　　　　　　　解决方法:把全部的外边距给上面元素的下外边距或者下面元素的上外边距。

　　　　　　　　

外边距合并的意义：

　　　　

　　　4.2.2、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

　　　　　　　解决方法: 1、给父集加overflow: hidden；2、border或者padding；3、不使用margin,用padding拉开距离。

padding和margin——内边距和外边距的更多相关文章

  1. CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

    CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景. ...

  2. (转)css内边距与外边距的区别，精辟啊

    css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...

  3. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

  4. CSS -- 盒子模型之边框、内边距、外边距

    一.使用border为盒子添加边框 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 1.border-style(边框样式)常见样式有: dashed( ...

  5. 区分内边距与外边距padding和margin

    以两个并排显示的div为例说明. 现在两个div都有背景颜色, 右边的div中有几行p, 若是想要使两个div之间有间隔, 即两块带了颜色区域之间产生空隙, 则给div的css中外边距margin赋值 ...

  6. css内边距与外边距的区别

    你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...

  7. CSS.03 -- 浏览器行高、字体；盒子模型--边框、内边距、外边距

    如果此时你也在自学中,请使用 FireWorks CS6 进行切图测距等,百度一下吧~ Fireworks的基本使用 新建文件   ctrl+n 打开文件  ctrl+o 调出和隐藏标尺 ctrl+r ...

  8. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  9. css常用属性：居中展示、内边距、外边距

    1.横向居中.纵向居中 2.纵向展示3个块级(div标签即可纵向展示) 3.横向展示3个块级 4.在横向块级上加上边框的两种方法 法一:在父级div上加上和样式一样高的height 法二:在父级div ...

随机推荐

  1. python中List append()、extend()和insert()的区别

    Python中向列表增加更多数据时,有append().extend()和insert()等方法 其中最常用的是list.append(obj) 向列表的尾部添加一个新的元素. 需要一次性添加多个元素 ...

  2. rabbitMq及安装、fanout交换机-分发（发布/订阅）

    <dependency>            <groupId>com.rabbitmq</groupId>            <artifactId& ...

  3. IP通信基础学习第四周(下)

    选择子网掩码时,不总是使用整个八位作为屏蔽位. 在每个子网中,子网掩码是相同的. 在划分子网的情况下,判断两台主机是不是在同一子网中,需看它们的网络号与子网地址是不是相同的. 变长子网掩码VLSM,无 ...

  4. 数据库表中不建索引，在插入数据时，通过sql语句防止重复添加

    sql 语句 INSERT IGNORE INTO table(aaa,bbb) SELECT '1111','2222' FROM DUAL WHERE NOT EXISTS( ' ) mybati ...

  5. source insight 4.0.86.0 安装过程中出现的问题

    1.sourceinsight_4.0.86.0-setup.exe 2.sourceinsight4.exe覆盖安装目录中的sourceinsight4.exe 3.导入lic文件 过程中360会将 ...

  6. python实现简单算法

    #选择n^2def selectSort(li): for i in range(len(li)-1): minLoc = i for j in range(i+1,len(li)): if li[j ...

  7. [ZOJ 4014] Pretty Matrix

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5742 AC代码: /* * 反思: * 1.遇到简单题别激动,先把它 ...

  8. 安装与配置apache WEB服务器(Linux环境)

    Linux环境下安装一个软件的方式多数为两种: 1.通过命令从远程源下载自动默认安装 2.编译安装 第一种较为简单,直接通过 yum 或者 apt-get 直接安装即可,但是对我来说,编译安装可能更加 ...

  9. 剑指offer：反转链表

    问题描述 输入一个链表,反转链表后,输出新链表的表头. c++代码 /* struct ListNode { int val; struct ListNode *next; ListNode(int ...

  10. Android studio 使用startService报错：IllegalStateException

    Android 8.0启动service报错:java.lang.RuntimeException和java.lang.IllegalStateException 错误信息: java.lang.Ru ...