css 样式中 margin padding和top类定位的区别

1 margin

margin 是外边距的意思，是边框到外部另一元素之间的距离，允许使用负值

语法结构：

margin:5px auto;                  意思上下为5,左右平均居中

margin-top: 20px;                 上外边距

margin-right: 30px;               右外边距

margin-bottom: 30px;           下外边距

margin-left: 20px;                  左外边距

margin:1px                            四边统一边距

margin:1px 1px                    上下边距,左右边距

margin:1px 1px 1px             上,左右,下边距

margin:1px 1px 1px 1px       上,右,下,左边距

注释：允许使用负值。

 

 

2 padding

pdding是内边距的意思，设置所有当前或者指定元素内边距属性，不允许使用负值。

 

语法结构：

 

padding-top:20px;         上内边距

padding-right:30px;        右内边距

padding-bottom:30px;       下内边距

padding-left:20px;         左内边距

padding:1px             四边统一内边距

padding:1px 1px           上下,左右内边距

padding:1px 1px 1px        上,左右,下内边距

padding:1px 1px 1px 1px     上,右,下,左内边距

 

3 top;left;right;bottom

1、top、bottom、left、right是绝对定位，必须设置position为absolute。 margin一系列设置是相对定位。注意：如果用top等，而position未设置为absolute，那设置是不起作用的。
2、top这些在绝对定位的前提下，这个绝对定位，是相对body  或者  position：relative的父级元素的绝对定位。margin的相对定位，是指相对相邻元素的定位。