您现在的位置是：网站首页> 编程资料编程资料

解决CCS中的margin：top塌陷问题

2023-10-18 226人已围观

简介 这篇文章主要介绍了CCS中的margin：top塌陷问题,本文通过实例截图给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

HTML结构如下：

CCS结构如下：

页面效果图如下：

现在我们可以看到在子元素中明明设置了向右50px和向下50px，可页面显示的效果却只有向右移动的没向下移动的。

通常来说，margin是设置元素的外边距，正常情况下设置margin值时应该是父元素相对于浏览器定位，子元素相对于父元素定位；而现在设置了

margin-top: 50px，页面却没效果这就说明是margin塌陷。

那什么是margin塌陷呢？

　　在子级中当设置margin-top: 50px;时,里面的盒子并没有改变，但是在给子元素设置margin-top: 150px;大于父盒子的高度时,子元素就不会再相对于父元素定位了而是带着父元素一起相对于浏览器去定位向下移动150px;这就说明是margin塌陷。(margin塌陷是在父级相对于浏览器进行定位时而子级并没有相对于父级定位，子级相对于父级就像塌陷了一样)

当我们把margin-top: 50px调成大于父级元素的高度时，子元素就不会再相对于父元素定位了而是带着父元素一起相对于浏览器去定位向下移动150px;
页面效果图如下：

要想解决margin塌陷问题就

上一篇：找你妹2千万金币怎么获取_找你妹2存档获取千万金币的方法_手机游戏_游戏攻略_

下一篇：css3 flex实现div内容水平垂直居中的几种方法使用CSS实现盒子水平垂直居中的方法(8种)CSS 水平居中并限定最大的宽度实现CSS实现子元素div水平垂直居中的示例CSS中的translate(-50%,-50%)实现水平垂直居中效果CSS3 不定高宽垂直水平居中的几种方式CSS3实现水平居中、垂直居中、水平垂直居中的实例代码手把手教你CSS水平、垂直居中的10种方式(小结)web前端之css水平居中代码解析

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网