盒模型

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一样;

改变自身间距

你可能感兴趣的:(盒模型)