margin与padding中的参数

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>