边距合并的现象（原因）
块级元素，两个普通的相邻的都有外边距的元素，会产生合并，结果是二者之间最大值
当一个元素在父容器内，
外边距合并有两种：1、在同一个父容器中相邻元素的外边距合并
2、两个元素一个是父元素一个是子元素，即父子元素的外边距的合并。父元素如果没有边框或者padding时，会出现合并，结果是二者最大值
二、如何让相邻元素不合并的方法
相邻元素再正常文档流中边距会合并，1、float浮动元素，
2、dispaly:inline-block,
但是overflow:hidden不能不合并；并不是所有的的BFC（外界交融的）都可以让元素的边距不合并，此时，可以对元素增加父元素，让父元素形成BFC，那其内部的元素不会合并边距
三、如何让父子元素不合并的方法
1、给父元素加个边框设置即可
2、对父元素设置padding-top（padding）:1px即可
如果一个元素没有内容，没有边框，没有margin,没有padding其自身的边距就可以发生合并，可以设置border:1px solid transparent;或者padding:1px;
外边距合并
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 盒模型是CSS中很重要的一个概念。只有真正的理解好盒模型，才能正确的使用盒模型进行页面布局。在这篇文章中，我们将深...
