css怪异现象合集

一、margin上塌陷解决方案(无中生有的margin-top)：

1.父级元素设置padding-top:1px;//最不靠谱的解决方案

2.父级元素设置 overflow: hidden; 或者 overflow:auto; 或者 overflow: scroll; //最现实的解决方案

3.父级元素设置display: table;//不太靠谱

4.父级元素设置 display: inline-block;//不太靠谱

5.父级元素设置display:flex;//不太靠谱

6.父级元素设置position: absolute;//最坑爹的解决方案

二、无缘无故出现的元素之间的间隙

1.设置当前元素 font-size:1px;

2.去除元素之间的换行

3.img元素有的会莫名的出现几px的留白，可以修改display属性，任何属性都可以去除，只要不是inline

img{

　　display:flex;

}

三、img元素的伪元素之after、before

这两个伪元素对于img看似无效，当图片加载失败的时候会生效