一、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. .Net Core技术研究-Span<T>和ValueTuple<T>

    性能是.Net Core一个非常关键的特性,今天我们重点研究一下ValueTuple<T>和Span<T>. 一.方法的多个返回值的实现,看ValueTuple<T> ...

  2. python之dict(或对象)与json之间的互相转化

    在Python语言中,json数据与dict字典以及对象之间的转化,是必不可少的操作. 在Python中自带json库.通过import json导入. 在json模块有2个方法, loads():将 ...

  3. BeyondCompare使用一段时间后会因“许可证密钥已被撤销：3281-0350“而无法使用

    解决方式: 1.用任意文本编辑软件打开“C:\Users\[Your User Name]\AppData\Roaming\Scooter Software\Beyond Compare 3\BCSt ...

  4. 用Cocos2dx开发棋牌游戏的观点解析

    众所周知,目前棋牌游戏特别的火.很多游戏公司都想在这一块赚钱,可是却不知用什么软件比较好的去开发棋牌游戏,对此,我列出了两款比较靠谱的软件去开发棋牌游戏,希望对大家有帮助! 第一款软件是cocos2d ...

  5. Spring Configuration注解使用

    @Configuration是spring.xml的注解版. @ComponentScan是<context:component-scan base-package="com.cosh ...

  6. pandas 时间格式转换

    OUTLINE 常见的时间字符串与timestamp之间的转换 日期与timestamp之间的转换 常见的时间字符串与timestamp之间的转换 这里说的字符串不是一般意义上的字符串,是指在读取日期 ...

  7. Tableau 学习资料

    官方文档: https://www.tableau.com/zh-cn/support/help 其他教程: tablaue破解版_tableau10 破解_tableau server 破解:htt ...

  8. java线程学习之yield方法

    yield方法是暂停当前正在执行的线程对象,并执行其他线程. 这是一个静态方法,一旦执行,它会使当前线程让出CPU.让出的cpu并不代表当前线程不执行了.当前线程让出CPU后,还会CPU资源的争夺,但 ...

  9. 搭建一个简单的Eureka程序

    Eureka集群主要有三个部分Eureka服务器,服务提供者,服务调用者 简单的来说就是服务提供者将服务注册到Eureka服务器,服务调用者对其服务进行查找调用. Eureka服务程序的搭建可参考官方 ...

  10. JavaScript中对象和数组的深拷贝

    不管是在面试中还是我们的项目中经常会用到数组或者对象的深拷贝,下面我就自己总结的分享给大家. 首先要知道什么是深拷贝?什么是浅拷贝? 深拷贝:源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另 ...