CSSmargin（外边距）

为元素设置外边距

默认情况下如果不设置外边距属性，HTML 元素就是不会有外边距，但也有例外的情况，因为浏览器会为一些 HTML 元素设置默认的外边距，例如

元素。您可以使用下面的属性来为 HTML 元素设置外边距：

• margin-top：设置元素上方的外边距；
• margin-bottom：设置元素下方的外边距；
• margin-right：设置元素右侧的外边距；
• margin-left：设置元素左侧的外边距；
• margin：外边距的简写属性，可以同时设置元素四个方向（上下左右）的外边距。

上述外边距属性的可选值如下表所示：

【示例】使用 margin-top、margin-bottom、margin-right、margin-left 几个属性分别设置元素四个方向上的外边距：

    


    

        

            margin-top: 10px;

            margin-right: 1em;

            margin-left: 1cm;
        
        

            margin-top: 10px;

            margin-bottom: 1em;

            margin-right: 10px;

            margin-left: 1cm;
        
    

运行结果如下图所示：

这里需要特别说明一下 margin 属性，与其它几个属性不同，margin 属性可以接受 1~4 个参数（参数之间使用空格分隔）：

• 如果提供四个参数，那么将按照上、右、下、左的顺序分别作用于元素四个方向的外边距；
• 如果提供三个参数，那么第一个参数会作用在元素上方的外边距，第二个参数会作用在元素左右两侧的外边距，第三个参数则作用在元素下方的外边距；
• 如果提供两个参数，那么第一个参数会作用在元素上方和下方的外边距，第二个参数会作用在元素的左右两侧的外边距；
• 如果只提供一个参数，那么这个值将同时作用于元素上下左右四个方向的外边距。

【示例】使用 margin 属性为元素设置外边距：

    


    

        
margin: 10px 1em;
        
margin: 10px 0px 1ex 1em;
    

运行结果如下图所示：

外边距折叠

外边距折叠指的是相邻的两个或多个外边距会在垂直方向上发生合并，合并为一个外边距。关于外边距折叠有以下几点需要注意：

• margin 折叠只发生在块级元素上；
• 浮动元素的外边距不会与任何外边距发生折叠；
• 设置了 overflow 属性且值不为 visible 的块级元素，将不会与它的子元素发生外边距折叠；
• 绝对定位元素的外边距不与任何外边距发生折叠；
• 根元素（例如）的外边距不与其它任何外边距发生折叠。

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

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

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

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