html中关于margin-top传递性问题的解决方法

最新推荐文章于 2024-01-10 10:32:11 发布

qq_42008211

最新推荐文章于 2024-01-10 10:32:11 发布

阅读量721

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_42008211/article/details/122287904

版权

margin-top现象： a元素内嵌套b元素，给b元素添加margin-top后，会传递给a元素
如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>margin-top的问题</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .outside {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .inside {
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: #000;
            
        }
    </style>
</head>

<body>
    <div class="outside">
        <div class="inside">
        </div>
    </div>
</body>

</html>

解决方法：

解决之一：

在父框中用padding-top；

解决之二:

父框或子框要浮动起来；

解决之三：（常用）

如果子块确实需要与父框保持上外间距时，在父框中添加overflow:hidden，则打破这种传递机制

解决之四：

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

解决之五：

给父元素或者子元素添加position:fixed;（为父元素或者子元素声明绝对定位。）
这里用到了定位的知识，将父元素显示在固定位置，就不会受margin-top塌陷的问题影响

解决之六：

给父元素设置display：table;

解决之七：(推荐)

使用伪元素

qq_42008211

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中关于margin-top传递性问题的解决方法

margin-top现象： a元素内嵌套b元素，给b元素添加margin-top后，会传递给a元素如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>margin-top的问题</title> <style type="text/css"> * { margin: 0px;
复制链接

扫一扫