解决margin-top塌陷问题的六种方法

什么是margin-top塌陷？

margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。

怎么解决margin-top塌陷？

对于margin-top的塌陷问题，可以从以下几点去解决，亲测有效：

1.给父元素增加边框

为了不影响原先的图像效果，可以将边框颜色设置为白色（与浏览器背景颜色一致）

2.溢出隐藏

在父元素的style里面添加overflow：hidden；

3.利用浮动

给父元素的style添加浮动，但是这种方法不推荐使用。因为会带来未知的错误

4.给父元素添加position:fixed;

这里用到了定位的知识，将父元素显示在固定位置，就不会受margin-top塌陷的问题影响

5.给父元素设置display：table;

6.使用伪元素
伪元素之所以被称为伪元素，就是因为他们不是真正的页面元素，html没有与之对应的元素，但是其用法和表现行为和真正的元素一样，所以被成为伪元素。

  .clearfix::before{content: '';display: table;}

解决margin-top塌陷问题的六种方法相关推荐

解决Margin塌陷问题方法
1.同级元素:如果两个元素垂直方向有间距,只需要设置给一个元素,不要进行拆分. 2.父子元素:让两个边距不要相遇,中间可以使用父元素border或padding将边距分隔开,更加常用的方法,父子盒模型 ...
解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
java在win8闪退_解决Win8/Win8.1系统下的IE11闪退的六种方法
相较于IE10浏览器以前的版本,IE11有了很较大的提升.界面呈扁平化的风格,浏览网页时给人一种很清新的感觉.不过有部分使用win8或者win8.1操作系统的用户却有遇到安装的IE11会有闪退的困扰, ...
android手机密码忘了哪个电话打开,安卓手机锁屏密码忘了怎么办解决锁屏密码六种方法介绍...
每个人都有安全意识是很正常的,跟上潮流,为自己设置一个锁屏密码,弄个复杂点的,可是也会有这样的情况发生,密码复杂到连自己都不记得了那该怎么办呢,忘记了锁屏图案密码,使自己的手机无法打开盖如何解决呢,小 ...
解决margin塌陷问题
一:什么是margin塌陷 ? 在标准文档流中,竖直方向(左右方向的不会出现塌陷现象)的margin会出现叠加现象,即较大的margin会覆盖掉较小的margin,竖直方向的两个盒子中间只有一个较大的 ...
html整体垂直居中,实现HTML元素垂直居中的六种方法
一. img的垂直水平居中使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用,如果想使用在img元素 ...
linux系统取消虚拟键盘,关闭iOS虚拟键盘的六种方法
第四种方法,通过轻击键盘之外的空白区域关闭虚拟键盘. 将屏幕上的view也就是textField的父视图拖一个touch down事件出来,和一个能关闭虚拟键盘的方法连接.如果视图没有touch do ...
Javascript中数组去重的六种方法
数组去重第一种方法: 先对数组进行排序sort(),排好序,然后把数组的当前项和后一项进行比较,相同则使用数组的splice(相同的位置,1),但是为了防止数组塌陷,每次删除数组元素的时候要把i的值 ...
ASP.NET刷新页面的六种方法
ASP.NET刷新页面的六种方法第一: private void Button1_Click( object sender, System.EventArgs e ) { Respons ...

解决margin-top塌陷问题的六种方法

解决margin-top塌陷问题的六种方法

什么是margin-top塌陷？

怎么解决margin-top塌陷？

解决margin-top塌陷问题的六种方法相关推荐

最新文章

热门文章