一：什么是margin塌陷？

在标准文档流中，竖直方向（左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin值，这就是margin的塌陷现象。

二：margin塌陷分类？

（1）兄弟盒子之间的塌陷问题。
（2）父子盒子之间的塌陷问题。

三：详细分析

（1）兄弟盒子之间的塌陷问题

比如下面两个盒子模型排列：

<body><div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line- height:100px;">层1</div><div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center; line-height:100px;">层2</div></body>

本来我们以为上面的盒子设置了margin-bottom的值，下面的盒子模型中设置了margin-top值，两者之间的距离应该是（30px+20px=50px）,但是结果两都之间的距离是30px如下面的图所示：

遇到这样的情况，两个兄弟盒子之间的间距应该是按照其中比较大的那个值来取。

解决方案：

在层2那层再包裹一层，设置属性overflow:hidden，这样上下之间的距离就是50px了。代码如下：

         <div style="width:400px;height:100px;background:#ea8080;margin-bottom:30px;color:#fff;text-align:center;line-height:100px;">层1</div><div style="overflow:hidden;"><div style="width:400px;height:100px;background:#f6adad;margin-top:20px;color:#fff;text-align:center;line-                  height:100px;">层2</div>
</div>

但是这样的弊端就是改变了HTML结构,在开发中是不能采用的。所以最好的方式是只设置层1的margin-bottom值或是 margin-top值。

（2）父子盒子之间的塌陷问题

比如下面两个盒子模型排列：

   <style>.box1 {width: 300px;height: 300px;background: #ec8180;}.box2 {width: 200px;height: 200px;background: #f7aeaf;margin-top: 50px;}</style><body><div class="box1"><div class="box2"></div></div>
</body>

当给box2层增加样式margin-top:50的时候，并没有看到父盒子与子盒子之间会有间距50px的距离，而是在父盒子上面会发现50px的间距如下图所示：

解决方案：

（1）给父元素father添加一个border边框，比如给box1添加样式：border：1px solid transparent这种方式造成贴合的样子；
（2）给父元素添加一个overflow: hidden;
（3）给父元素添加一个position: fixed;
（4）给父元素添加一个display: table;
（5）将子元素都margin改为父元素的padding
（6）给子元素son添加一个兄弟元素属性为content:“”;overflow: hidden;

解决margin塌陷问题相关推荐

解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
解决margin塌陷的问题_margin塌陷问题及解决
margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部. 1. 同级元素塌陷:上面的元 ...
解决margin塌陷的问题_剖析一些经典的CSS布局问题，为前端开发+面试保驾护航...
一.让一个元素水平垂直居中,到底有多少种方案? 水平居中对于行内元素: text-align: center; 对于确定宽度的块级元素: width和margin实现.margin: 0 auto ...
解决Margin塌陷问题方法
1.同级元素:如果两个元素垂直方向有间距,只需要设置给一个元素,不要进行拆分. 2.父子元素:让两个边距不要相遇,中间可以使用父元素border或padding将边距分隔开,更加常用的方法,父子盒模型 ...
如何解决margin塌陷以及margin合并
什么是外边距合并,以及常见的几种情况外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 所谓的外边距合并就是,当两个垂直外边距相遇时,它们将形成一个外边距.合 ...
margin塌陷问题
magin塌陷现象:在垂直方向,父子关系两个盒子中margin大的覆盖margin小的,导致两个盒子有同一个margin. <style> .div1{ width: 100px; hei ...
margin设置规则与margin塌陷、合并
① margin 设置规则 margin 复合属性,可以设置一个值.两个值.三个值.四个值,规则如下: margin: 10px; /*设置 4 个方向的外边距*/ margin: 10px 20px ...
【CSS】1035- 再看 margin 塌陷和合并问题
前言小问题总是被人视而不见,等遇到的时候又突然想不起来,所以我们需要经常总结,这可以帮助我们更好的记忆东西.今天我们来总结两个不起眼的小问题:margin塌陷和margin合并 margin塌陷什 ...
margin塌陷与margin合并、浮动流
一.margin 塌陷父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...

解决margin塌陷问题

一：什么是margin塌陷？

二：margin塌陷分类？

三：详细分析

解决margin塌陷问题相关推荐

最新文章

热门文章

解决margin塌陷问题

一：什么是margin塌陷 ？

二：margin塌陷分类 ？

三：详细分析

解决margin塌陷问题相关推荐

最新文章

热门文章

一：什么是margin塌陷？

二：margin塌陷分类？