一、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. 彻底卸载Xubuntu Kubuntu

    卸载Xubuntu -linux-gnu blueman brltty brltty-x11 catfish cheese-common dbus-user-session dconf-cli deb ...

  2. redis命令行操作

    打开shell,首先开启redis服务,在保证服务开启的情况下,打开客户端. 然后可以根据文档,进行命令行试验.

  3. JQuery 中$("input:eq(0)") eq 的意思

    :eq(index)匹配一个给定索引值的元素 ----------------------------------------------------- Matches a single elemen ...

  4. ldap认证jupyter notebook

    虽然jupyter hub是支持ldap的,见ldapauthenticator: 但是登录成功后似乎要以登录用户名启动notebook,而登录用户在服务器上不存在,于是500了: 在服务器上通过pa ...

  5. 当namenode启动不了时

    重新格式即可,注意格式化前要将临时目录下的文件全部删除

  6. Docker初始

    如今Docker的使用已经非常普遍,特别在一线互联网公司.使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力.在云服务概念兴起之后,Docker的使用场景和范围进一步发展,如 ...

  7. windows中cmd常用命令收集

    1.经常会启动端口后忘关,需要杀端口的命令:查找端口占用命令 netstat -ano|findstr 端口例如      (8081)      杀端口: taskkill /pid xxxxx - ...

  8. openwrt如何关掉防火墙?

    答: 1.  阻止防火墙服务开机自动启动 /etc/init.d/firewall disable 2. 关闭防火墙 /etc/init.d/firewall stop

  9. SPOJ 1812 LCS2 - Longest Common Substring II

    思路 后缀自动机求多串的最长公共子串 对第一个建出后缀自动机,其他的在SAM上匹配,更新到一个节点的匹配长度最大值即可,最后对所有最大值取min得到一个节点的答案,对所有节点答案求max即可 然后注意 ...

  10. 6、Docker存储卷

    Why Data Volumes?  来自马哥教育 Data volumes Volume types  绑定挂载卷:在宿主机和容器上各指明绑定路径才能进行绑定. docker管理卷:在容器内指定挂载 ...