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

CSS布局问题：父元素跟随子元素偏移的解决方案

原创已于 2023-04-04 20:28:19 修改 · 220 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

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

html+css 专栏收录该内容

1 篇文章

订阅专栏

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

在我们进行网页布局时，一个父元素可能会嵌套多个子元素，为了让布局合理，我们会经常使用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>