margin:外边距。

作用分配元素剩余空间
margin:0 auto; 　　　使元素水平居中

没居中

居中

语法：

maegin:10px;

上右下左都是10px间距

margin:10px 20px;

上下：10px 左右20px；

margin：10px 20px 30px；

上10px 左右：20px 下:30px

margin:10px 20px 30px 40px;

顺时针顺序

上10px 右20px 下30px 左40px；

margin-top：10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

margin重叠效应
1.两个相邻元素
2.上下外边距
3.正正：最终的间距取最大margin
4.正负：margin正负相加取值
5.负负：取绝对值最大的

margin溢出（重叠）
子元素margin-top，导致父元素向下移动
解决方案
1.给父元素设置overflow:hidden
2.给父元素设置padding-top
3.给父元素设置边框border

padding：内边距

语法：和margin一样；

改变自身间距