margin&padding样式属性

 

margin:

margin-left: 10px;
margin-right: 10px;		
margin-top: 10px;
margin-bottom: 10px;

用于在一个声明中设置所有外边距的宽度，或者设置各边上外边距的宽度。该属性有多个值：

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。注：允许使用负值，不过要谨慎使用；
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。注：IE浏览器不支持"inherit"属性值 。

顺时针方向：

margin:0 auto;——水平居中显示，

*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置，

块级元素的垂直相邻外边距会合并（即外边距合并），合并后的外边距间距等于两个外边距高度中的较大者，也叫margin塌陷；

行内元素实际上不占上下外边距；行内元素的的左右外边距不会合并；浮动元素的外边距也不会合并；

 

---

padding:

在一个声明中设置元素所有内边距的宽度，或者设置各边上内边距的宽度， 该属性有多个值：

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值；
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。注：IE浏览器不支持"inherit"属性值 。

顺时针：跟margin相同

行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现。

*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值，方便后面设置，

行内非替换元素上设置的内边距不会影响行高计算，因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠；元素的背景会延伸穿过内边距；