在 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>
这个示例中可以看到，内层 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>