margin合并问题思考
2018-02-01 21:50
176 查看
最近做任务的时候发现margin-top存在一个很奇怪的现象,就是父级盒模型不加padding或border的时候内部文档流中第一个子集的margin-top会将父元素向下拉去,导致父级“下陷”,如下图所示:
从图一中可以看出,子集盒模型已设置margin-top值,但从图二中可以看出父级盒模型的content顶部明显下降,并非是我们想要的效果。这是常见的margin合并问题,由于盒模型是在编写css样式过程中必须掌握的知识,其中涉及的margin、padding、border的属性设置将直接影响盒子定位,因此有必要将margin合并问题做以下总结,只有非常清楚其中的原理才能游刃有余的解决盒模型中存在的“奇怪”问题。
当然,还有兄弟元素之间的合并,相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的“毗邻”合并,水平方向不存在其现象。最常见的应用实例就是段落p标签的使用,p标签本身有上下1em的margin,但是在相邻的p标签之间只会显示1em的间距而不是相加为2em的间隔。
如论是margin的“嵌套”合并还是“毗邻”合并在一般标准浏览器中都会出现,但在IE6和IE7不会出现此现象。
总的来说“嵌套”合并产生的条件有:
父级的上边距与子级的上边距之间没有border;
父级的上边距与子级的上边距之间没有非空内容;
父级的上边距与子级的上边距之间没有padding;
父级和子级中没有设置定位属性(除static和relation)、overflow(除visible)或display:inline-block等;
父级或子级都没有设置浮动。
因此,只有破坏以上其中一种产生条件便可解除“嵌套”合并,解决方案如下:
为父级添加border(一般不用)
在子元素前面添加额外的元素,设置display:block;height:1px;overflow:hidden(累赘,不建议)
修改父级高度,添加padding-top或将子元素的maigin-top改成padding-top(常用)
父级添加overflow:hidden属性(终结者,建议使用)
子集元素设置displ
4000
ay:inline-block属性
父级或子级设置浮动属性(看布局需要)
父级或子级申明绝对定位(看布局需要)
另外,解决“毗邻”合并的解决方案有:
设置绝对定位position:absolute的盒模型
设置float属性的盒模型;
设置display:inline-block的盒模型。
从图一中可以看出,子集盒模型已设置margin-top值,但从图二中可以看出父级盒模型的content顶部明显下降,并非是我们想要的效果。这是常见的margin合并问题,由于盒模型是在编写css样式过程中必须掌握的知识,其中涉及的margin、padding、border的属性设置将直接影响盒子定位,因此有必要将margin合并问题做以下总结,只有非常清楚其中的原理才能游刃有余的解决盒模型中存在的“奇怪”问题。
如何解决
一个盒模型如果没有上补白(padding-top)或上边框(border-top),那么这个盒子的上边据(margin-top)会和其内部文档流中第一个子元素的上边距重叠,这是父级元素与子集元素margin-top产生合并的原因。当然,还有兄弟元素之间的合并,相邻的两个或者多个外边距在垂直方向上合并成一个外边距,这就是所谓的“毗邻”合并,水平方向不存在其现象。最常见的应用实例就是段落p标签的使用,p标签本身有上下1em的margin,但是在相邻的p标签之间只会显示1em的间距而不是相加为2em的间隔。
如论是margin的“嵌套”合并还是“毗邻”合并在一般标准浏览器中都会出现,但在IE6和IE7不会出现此现象。
总的来说“嵌套”合并产生的条件有:
父级的上边距与子级的上边距之间没有border;
父级的上边距与子级的上边距之间没有非空内容;
父级的上边距与子级的上边距之间没有padding;
父级和子级中没有设置定位属性(除static和relation)、overflow(除visible)或display:inline-block等;
父级或子级都没有设置浮动。
因此,只有破坏以上其中一种产生条件便可解除“嵌套”合并,解决方案如下:
为父级添加border(一般不用)
在子元素前面添加额外的元素,设置display:block;height:1px;overflow:hidden(累赘,不建议)
修改父级高度,添加padding-top或将子元素的maigin-top改成padding-top(常用)
父级添加overflow:hidden属性(终结者,建议使用)
子集元素设置displ
4000
ay:inline-block属性
父级或子级设置浮动属性(看布局需要)
父级或子级申明绝对定位(看布局需要)
另外,解决“毗邻”合并的解决方案有:
设置绝对定位position:absolute的盒模型
设置float属性的盒模型;
设置display:inline-block的盒模型。
相关文章推荐
- css基础 margin 上下外边距合并问题 小例子
- margin外边距合并问题
- css基础 margin 上下外边距合并问题 小例子
- 转载:margin外边距合并问题以及解决方式
- margin外边距合并问题以及解决方式
- CSS margin合并问题
- 关于css+div margin 居中问题 和边距合并
- margin 合并问题
- margin 外边距合并问题
- css中对于盒子模型margin属性的思考---margin折叠问题
- 外边距(margin)合并问题
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题 问题表述: 那天晚上一个同学给我发来一个问题,原型大概是“一个maindiv嵌套了一个div.class="he
- Css Margin合并问题
- margin-top失效, css + div 布局之 CSS盒模型 外边距合并问题
- 子元素的margin-top与父元素合并的问题
- margin塌陷问题与合并问题
- margin外边距合并问题以及解决方式
- Css中margin塌陷与合并问题与解决办法
- 【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容
- CSS2系列:外边距合并问题(margincollapse)