目录

 内边距（paddingj）：

前言：

设置内边距：

外边距（margin）：

 前言：

设置外边距：

补充(折叠)：

 内边距（padding）：

前言：

        内边距 (padding) 是元素内容跟元素边框之间的距离，就像我在一个盒子里面放一本书 (内容) 这个盒子的边框到这本书的距离就是内边距，书越大盒子越小内边距就会越小，其属性如下所示：

• padding-top: 可以设置元素距离上面边框的距离。
• padding-right：可以设置元素距离右边边框的距离
• padding-bottom：可以设置元素距离下面边框的距离。
• padding-left：可以设置元素距离左边边框的距离。
• padding：可以一次性设置元素距离上下左右边框的距离。

初识 CSS-CSDN 博客 CSS 设置网页颜色 -CSDN 博客 0 基础看这一篇就够了 HTML 教程(详细汇总)_php 代码格式 -CSDN 博客

上述属性的可选值如下：

使用 padding 属性时需要注意：

• 如果你要一次设置 四个参数 ，那么需要按照 上，右，下，左的顺序 依次设置元素四个方面的内边距。
• 如果你只提供 三个参数 ，那 第一个将 会用来设置 上面 距离边框的距离，第二个 将会被用来设置 左，右两个方向 距离边框的距离，最后一个 将会被用来设置距离 下方 到边框的距离。
• 如果一次只提供 两个参数 ，那 第一个 参数会被用来 上，下 两个方向的内边距，另外一个 参数会被用来设置 左，右 两个方向的内边距。
• 如果你只提供 一个参数 ，那么这个参数将是 四个方向 的值。

设置内边距：

上述属性的示例代码如下所示：

    
    
    
    



    
padding-top:20px;
    
padding-bottom:30px;
    
padding-left:30px
    
padding-right:20px
    
padding:20px 10px 3px 7px;

        上述代码的运行结果如下所示：其中 绿色框 起来的是 padding， 红色框 起来的是内容，这里并无难点所以不过多讲解。

外边距（margin）：

 前言：

        在 HTML 很多元素都有边框 (margin), 外边框就是在边框以外的区域，这片区域不受很多属性的影响。

打个比方如: 门，其的组成部分有可打开的门就是元素的内容，还有固定门的门框也就是边框，其边框以外的就是外边距。

设置外边距：

        在默认情况下一般元素是没有外边距的，但是也会有些例外，因为浏览器会给 HTML 元素设置默认值有些 HTML 元素的就会有一个设置了的外边距。比如

….

元素，我们也可以使用下面属性来给 HTML 元素设置外边距：

• margin-top: 设置元素 上面 的外边距。
• margin-bottom：设置元素 下面 的外边距。
• margin-right：设置元素 右边 的外边距。
• margin-left：设置元素 左边 的外边距。
• margin：也就是上述所有属性的简写，可以同时设置 四个方向 (上下左右) 的外边距。

上述属性可选值如下所示：

使用 margin 属性时需要注意：

• 如果你要一次设置 四个参数 ，那么需要按照 上，右，下，左的顺序 依次设置元素四个方面的外边距。
• 如果你只提供 三个参数 ，那 第一个 将会用来设置 上面 ， 第二个 将会被用来设置 左，右 两个方向，最后一个 将会被用来设置 下面。
• 如果一次只提供 两个参数 ，那 第一个 参数会被用来 上，下 两个方向，另外一个 参数会被用来设置 左，右 两个方向。
• 如果你只提供 一个参数 ，那么这个参数将是 四个方向 的值。

上述属性示例代码如下所示：

    
    
    
    



    

        
direction 啥都没得的一行
    
    
 

    

        
margin 一个集合体
    

        上述代码的运行结果如下所示：下面 红色 的是代码的，绿色 的是外边距，可以看到无论是一个个的设置还是用 margin 全部一起设置，都可以可以的。

补充(折叠)：

        外边距折叠指的是两个相邻的元素或者多个元素的外边距会在垂直方向向上发生合并，变成一个外边距，外边距折叠需要注意的是：

• margin折叠只会发生在块级元素上。
• 浮动元素的外边距不会跟任何外边距发生折叠。
• 如果元素设置了 overflow 属性并且其属性的值不是 visible 的块级元素，它将不会跟子元素发生外边距折叠。
• 绝对定位的元素的外边距不会跟任何外边距发生折叠。
• 根元素 () 的外边距不会跟任何外边距发生折叠。

1) 在相邻的两个兄弟元素之间：

• 如果相邻两个元素外边距的值都为正数，那么两个元素的实际间距为大的那个。
• 如果相邻两个元素外边距的值都为负数，那么两个元素的实际间距为小的那个。
• 如果相邻两个元素外边距的值一个为正数、一个为负数，那么两个元素之间的实际间距为两个外边距相加的和。

示例代码如下：

    
    
    
    



    
bottom:40px
    
top:20px

代码运行结果如下所示：

2) 在父元素与其子元素之间：

注意：父元素不能定义边框和内边距，且父元素与子元素之间不能有其它元素

• 如果父元素与子元素外边距的值都为正数，那么折叠后的外边距为两个外边距中较大的那个。
• 如果父元素与子元素外边距的值都为负数，那么折叠后的外边距为两个外边距中较小的那个。
• 如果父元素与子元素外边距的值一个为正数、一个负数，那么折叠后的外边距为两个外边距相加的和。

示例代码如下所示：

    
    
    
    



    

        margin-bottom
        
margint-top 元素的外边框
    

代码运行结果如下所示：