1、正常元素设置
- 两个元素设置纵向外边距后，外边距会重叠，两元素间的距离是较大的那个纵向margin值。
- 两个元素设置横向外边距后，两个元素间的距离是外边距相加之和。——设置横向，如在div中嵌套span。
2、脱离文档流设置
- 如果两元素浮动，两元素之间的距离为外边距相加之和。
3margin负值的使用方法
- 在margin-bottom: -1px;
- border-bottom: 1px solid black;
- 然后在 border包含的这个块中写——overflow: hidden;
4、margin的使用问题
- 两个标签间是父子关系；
- 其之间什么都没有（例如border等)；
- 在子级中设置纵向的margin，则纵向margin作用于父级中。
- *解决：*用父级的内边距（padding）替代掉子级的margin。
- 结论：*margin 和 padding的使用——>父子之间：padding*； 同级之间用margin。
5、margin造成的兼容问题
5.1 IE6下的双边距bug
- 产生原因：
- IE6浏览器下；
- 左浮动同时设置左margin 或者 右浮动同时设置右margin
- 解决方法：
- 为浮动元素设置display: inline-block或者display: inline;
5.2 纵向的margin叠加
- 产生效果：
- 上下排列的两个元素，上面元素设置margin-bottom，下面元素设置margin-top，间距效果不是两值相加，而是两者取其大值。
- 解决方法：
- 法1：两个块都设置浮动；
- 法2：只对一个块设置上/下外边距。
5.3 IE6下的怪异解析
- 产生原因：
- IE6浏览器；
- 未进行文档声明；
- 盒模型的大小计算方法发生变化
解析方式：
- 正常解析模式下，盒模型的宽度 = width + margin(左右) + padding(左右) + border(左右)；
- 怪异解析模式下，盒模型的宽度 = margin + width或者padding+border（两者取其大者） 。
解决方法：
- 正常设置文档声明：
<!DOCTYPE html>
1096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
