#CSS 的内外边距

在 CSS 中通过 margin, padding，属性分别设置外边距和内边距。

/* 外边距 */
margin: A;          /* 上下左右外边距均为 A */
margin: A B;        /* 上下外边距为 A，左右外边距为 B */
margin: A B C D;    /* 上右下左 外边距分别为 A B C D */
margin-top: A；     /* 上外边距为 A */
margin-bottom: A；  /* 下外边距为 A */
margin-left: A；    /* 左外边距为 A */
margin-right: A；   /* 右外边距为 A */

/* 内边距 */
padding: A;         /* 上下左右内边距均为 A */
padding: A B;       /* 上下内边距为 A，左右内边距为 B */
padding: A B C D;   /* 上右下左 内边距分别为 A B C D */
padding-top: A；    /* 上内边距为 A */
padding-bottom: A； /* 下内边距为 A */
padding-left: A；   /* 左内边距为 A */
padding-right: A；  /* 右内边距为 A */

示例：

<div style="background-color:green;">
    <div style="margin: 30px; padding: 30px; background-color:#212121; color:cyan;">
        margin: 30px; <br/>
        padding: 30px; <br/>
    </div>
</div>

内边距&外边距

    

        margin: 30px; 

        padding: 30px; 

    

这个示例中可以看到，内层 div 的外边距好像只有左右两边有效，上下两边无效。其实上下外边距“溢出”到外层 div 之外去了。

这种现象称为 外边距折叠（Margin Collapse） ，即多层元素同时拥有外边距时，上下外边距合并为最大值。

可以通过将 overflow 属性设为 visible 以外的值消除外边距折叠：

<div style="background-color:green; overflow:hidden;">
    <div style="margin: 30px; padding: 30px; border: 3px solid red; background-color:#212121; color:cyan;">
        margin: 30px; <br/>
        padding: 30px; <br/>
        border: 3px solid red; <br/>
    </div>
</div>

消除外边距折叠

    

        margin: 30px; 

        padding: 30px; 

        border: 3px solid red;