三个盒子的嵌套--嵌套块元素垂直外边距的合并

最新推荐文章于 2025-04-07 16:47:22 发布

原创最新推荐文章于 2025-04-07 16:47:22 发布 · 1.7k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#三个盒子的嵌套 #嵌套块元素垂直外边距的合并

web开发同时被 3 个专栏收录

12 篇文章

订阅专栏

布局的核心

3 篇文章

订阅专栏

常用的设计

2 篇文章

订阅专栏

本文探讨了在HTML布局中，当存在三个嵌套块元素时，如何处理它们之间的垂直外边距合并问题。通过调整父元素的内边距或者应用`overflow:hidden`属性，可以有效地解决盒子对齐不正确的问题。

1.首先创建三个盒子，我们首先想到的是去修改第二个盒子和第三个的上外边距，左外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .grandFather{
            width: 500px;
            height: 500px;
            background-color: blue;

        }
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
            margin-top: 100px;
            margin-left: 100px;
        }
        .son{
            width: 150px;
            height: 150px;
            background-color: green;
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="grandFather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>