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

时间:2024-12-16 14:07:56

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的相对定位,是指相对相邻元素的定位。