父子嵌套布局时同时调整垂直方位margin导致堆叠

JasonZhang~

已于 2023-04-04 20:28:19 修改

阅读量165

点赞数 4

分类专栏： html+css 文章标签： html css 前端

于 2022-02-27 16:49:08 首次发布

本文链接：https://blog.csdn.net/cafune_f/article/details/123165797

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在网页布局中，当父元素和子元素同时设置margin-top时，父元素可能会跟随子元素发生偏移。解决这个问题可以采用两种方法：一是给父元素添加1像素的透明边框，二是给父元素添加1像素的内边距。这两种方法能有效防止父元素因子元素的margin而产生不必要的位移。

摘要由CSDN通过智能技术生成

在我们进行网页布局时，一个父元素可能会嵌套多个子元素，为了让布局合理，我们会经常使用margin、padding等来调整边距。

有时会调整父元素的margin，有时会调整子元素的margin，有时会同时调整父元素和子元素的margin。而当我们同时调整margin-top时，这时候会发现，父元素会跟着子元素一起偏移，这不是我们想要的结果啊。。。

<!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>Document</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: gray;
            margin-top: 150px;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: green;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>