CSS样式属性margin,padding详解

盒模型基本属性有两个：padding和margin。

以边框border为界，边框里面是内边距，边框外面是外边距。

一.外边距margin：

外边距是指边框以外与其他同级元素之间的距离，外边距可以控制同级元素之间的距离( 用于设置同级标签的间距)。
1.margin的复合式写法：

margin：10px；（表示元素上下左右外边距都是10px）

margin：10px 10px；（表示元素上下外边距是10px，左右外边距是10px）

margin：10px 10px 10px；（表示元素上外边距是10px，左右外边距是10px，下外边距是10px）

margin：10px 10px 10px 10px；（表示元素上外边距是10px，右外边距是10px，下外

边距是10px，左外边距是10px）
2.margin的分开式写法：

margin-top: 10px;（表示元素上外边距是10px）

margin-right: 10px;（表示元素右外边距是10px）

margin-bottom: 10px;（表示元素下外边距是10px）

margin-left: 10px;（表示元素左外边距是10px）

3.margin:0 auto;——水平居中显示。
4.*{margin:0;}——取消浏览器为HTML文档中各标签设置的margin默认值，方便后面设置。
5.块级元素的垂直相邻外边距会合并（即外边距合并），合并后的外边距间距等于两个外边距高度中的较大者（例子）；行内元素实际上不占上下外边距；行内元素的的左右外边距不会合并（例子）；浮动元素的外边距也不会合并；

二.内边距padding：

声明中设置元素内边距的宽度，或者设置各边上内边距的宽度
1.padding的复合式写法：

padding：10px；（表示元素上下左右内边距都是10px）

padding：10px 10px；（表示元素上下内边距是10px，左右内边距是10px）

padding：10px 10px 10px；（表示元素上内边距是10px，左右内边距是10px，下内边距是10px）

padding：10px 10px 10px 10px；（表示元素上内边距是10px，右内边距是10px，下内

边距是10px，左内边距是10px）

2.padding的分开式写法：

padding-top: 10px;（表示元素上内边距是10px）

padding-right: 10px;（表示元素右内边距是10px）

padding-bottom: 10px;（表示元素下内边距是10px）

padding-left: 10px;（表示元素左内边距是10px）
3.*{padding:0;}——取消浏览器为HTML文档中各标签设置的padding默认值，方便后面设置.
4.行内非替换元素上设置的内边距不会影响行高计算，因此如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠；元素的背景会延伸穿过内边距；