使用块标签时产生的塌陷问题

NehzUs

已于 2022-05-08 14:30:41 修改

阅读量219

点赞数

文章标签： css

于 2022-04-13 19:10:57 首次发布

本文链接：https://blog.csdn.net/m0_62903673/article/details/124154319

版权

在运行项目时，我们经常会遇到这样的问题，在给子块标签写外边距的时候，并没有达到自己想要的与父块标签上方产生距离，而是整体下移了。感觉软件出了问题，像这样：

事实上，在css里就有这样一个规律吧算是，当腹肌的第一个子级是块标签，并且使用了margin或margin-top的时候，容易出现塌陷问题。

解决办法有以下三种：

1. 这种方法也是我们最建议的一种方法，就是在父级使用overflow溢出隐藏解决；代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lizi</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            overflow: hidden;
            
        }
        span {
            display: block;
            width: 50px;
            height: 50px;
            background-color: red;   
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
    </div>
    
</body>
</html>

其他方法也有，只不过有局限性。

2. 不使用margin，而是在父级使用padding-top，我们会发现使用完以后父级标签明显变宽，这是我们可以改变父级标签的高度height，如下：

3. 在已有的项目设计要求下对父级使用border，加边框。前提是，项目设计中有边框。效果如下：

NehzUs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用块标签时产生的塌陷问题

在运行项目时，我们经常会遇到这样的问题，在给子块标签写外边距的时候，并没有达到自己想要的与父块标签上方产生距离，而是整体下移了。感觉软件出了问题，像这样：事实上，在css里就有这样一个规律吧算是，当腹肌的第一个子级是块标签，并且使用了margin或margin-top的时候，容易出现塌陷问题。解决办法有以下三种：1. 这种方法也是我们最建议的一种方法，就是在父级使用overflow溢出隐藏解决；代码如下：<!DOCTYPE html><html lang="en
复制链接

扫一扫