CSS 外边距(margin)
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;} //上 右 下 左
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
p {margin: 1px;} /* 等价于 1px 1px 1px 1px */ /*只给定一个值时，其它3个外边距都由这个值(上外边距)复制得到*/
h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */ /*第3个值(下外边距)会从第1个值(上外边距) 第4个值会从第2个值复制得到*/
h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */ /*第3个值(下外边距)会从第1个值(上外边距) 第4个值会从第2个值复制得到*/
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */ /* 第4个值(左外边距)会从第2个值(右外边距)复制得到*/
其复制规则如下图所示：
另外，还可以为 margin 设置一个百分比数值： p {margin : 10%;}
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
如果只设置相应上单边外边距属性
margin-top margin-right margin-bottom margin-left
CSS 内边距(padding)
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
其复制规则与margin相同。
单边内边距属性
padding-top padding-right padding-bottom padding-left
百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
下面这条规则把段落的内边距设置为父元素 width 的 10%：
p {padding: 10%;}
例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。
<div style=" 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>