CSS：padding和margin

一、padding

1、定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

2、说明

这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注意：不允许使用负值。

padding:10px 5px 15px 20px;

• 上内边距是 10px
• 右内边距是 5px
• 下内边距是 15px
• 左内边距是 20px

padding:10px 5px 15px;

• 上内边距是 10px
• 右内边距和左内边距是 5px
• 下内边距是 15px

padding:10px 5px;

• 上内边距和下内边距是 10px
• 右内边距和左内边距是 5px

padding:10px;

• 所有 4 个内边距都是 10px

3、可能的值

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。

4、padding在块元素、内联元素中的区别

HTML里分两种基本元素，即block和inline。block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

（1）在块元素中：

padding在块级元素下，上下左右可以随意设定，会对元素内部发生改变。

（2）在内联元素中：

行内非替换元素上设置的内边距不会影响行高计算；因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值，行内元素的padding元素，只有padding-left和padding-right有效果，上下不识别。

二、margin

1、定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

2、说明

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

注意：允许使用负值。

margin:10px 5px 15px 20px;

• 上外边距是 10px
• 右外边距是 5px
• 下外边距是 15px
• 左外边距是 20px

margin:10px 5px 15px;

• 上外边距是 10px
• 右外边距和左外边距是 5px
• 下外边距是 15px

margin:10px 5px;

• 上外边距和下外边距是 10px
• 右外边距和左外边距是 5px

margin:10px;

• 所有 4 个外边距都是 10px

 3、可能的值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	以包含元素宽度的百分比指定外边距。
inherit	规定应该从父元素继承外边距。

4、margin在块元素、内联元素中的区别

HTML里分两种基本元素，即block和inline。block元素另起一行开始，并独占一行。inline元素则同其他inline元素共处一行。

（1）在块元素中：

margin在块级元素下，上下左右可以随意设定。且块级元素的margin的参照基准是前一个元素即相对于自身之前的元素有margin距离。如果元素是第一个元素，则就是相对于父元素的margin距离。

（2）在内联元素中：

margin-top和margin-bottom对内联元素（对行）的高度没有影响，如果你要改变内联元素的行高即类似文本的行间距，那么只能使用这三个属性：line-height，fong-size，vertical-align。请记住，这个影响内联元素高度的是line-height而不是height。