移动web-margin塌陷

margin塌陷有两种情况:
（1）有两个盒子垂直排列，上面的盒子设置margin-bottom，下面的设置margin-top，那么他俩的间距会重叠，以大的计算（这种情况，只需要设置一个盒子的外边距即可）

（2）父子元素中，内部的盒子给margin-top，那么父元素也会受到影响产生上边距

解决办法

（1）为父盒子设置border，添加border后，子元素和父元素就不是贴合的（可以将border设置为透明的 border: 1px solid transparent;）
（2）为父盒子添加overflow: hidden;
（3）为父盒子设置padding值
（4）为父盒子添加position: fixed;
（5）为父盒子设置display: table;
（6）利用伪元素给父元素前面加一个空元素
.father::before{ content: ''; display: table; }

移动web-margin塌陷相关推荐

解决margin塌陷的问题_margin塌陷问题及解决
margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇,在浏览器中加载的真正的外边距不是两个间距的加和,而是两个边距中值比较大的,边距小的塌陷到了边距值大的值内部. 1. 同级元素塌陷:上面的元 ...
margin塌陷问题
magin塌陷现象:在垂直方向,父子关系两个盒子中margin大的覆盖margin小的,导致两个盒子有同一个margin. <style> .div1{ width: 100px; hei ...
margin塌陷与margin合并、浮动流
一.margin 塌陷父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...
解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
【HTML/CSS】margin塌陷和合并问题
1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang="en"> <head><meta char ...
解决margin塌陷问题
一:什么是margin塌陷 ? 在标准文档流中,竖直方向(左右方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的 ...
CSS高度塌陷问题（float塌陷margin塌陷）
目录一.float塌陷 1.问题 2.代码示例 3.解决方法 1.每个盒子设定固定的width和height 2.给外部的父盒子也添加浮动 3.给父盒子添加overflow属性. 4.父盒子里最下方 ...
margin设置规则与margin塌陷、合并
① margin 设置规则 margin 复合属性,可以设置一个值.两个值.三个值.四个值,规则如下: margin: 10px; /*设置 4 个方向的外边距*/ margin: 10px 20px ...
margin塌陷和margin合并
一.margin塌陷父子嵌套元素垂直方向的 margin ,父子元素是结合在一起的,他们两个会取其中最大的值正常情况应该是父级相对于浏览器进行定位,子级应该相对于父级定位的 , 但是 margi ...
盒子塌陷和 margin塌陷
1,盒子塌陷产生的原因:当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父 ...

移动web-margin塌陷

解决办法

移动web-margin塌陷相关推荐

最新文章

热门文章