padding
padding :盒子给padding会撑大盒子
padding不会撑大盒子的情况:这个盒子没有给指定的宽度
margin外边距合并
1. 相邻的2个块元素都给了margin(上下的2个盒子,左右不会)
上边的一个盒子给了margin-bottom,上边的一个盒子给了margin-top,取2个中最较大的值,这种称之为外边距塌陷
解决:尽量只给一个盒子margin
2. 嵌套的块元素垂直外边距合并
嵌套的2个盒子,如果父元素没有上内边距及边框
父盒子给了margin-top,子盒子也给了margin-top,取2个中最较大的值,这种称之为外边距合并(塌陷)
解决:给父定义边框,内边距,父添加overflow:hidden,浮动,定位
根据稳定性:width > padding > margin
盒子模型
标准(w3c):就是内容content
ie盒模型/CSS3盒模型:content+padding+border
设置:
标准:box-sizing:content-box 默认
ie:box-sizing:border-box 设置后padding+border不会撑大盒子
