margin-top样式效果出错

最新推荐文章于 2023-10-02 10:57:11 发布

Ariel_ckr

最新推荐文章于 2023-10-02 10:57:11 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/79561447

html+css+js+框架专栏收录该内容

36 篇文章

订阅专栏

本文探讨了CSS中子元素的margin-top属性如何影响其父级元素，特别是当父元素未设置padding-top值时，子元素的外边距会发生层叠现象。文中提供了两种解决方法：一是给父元素增加padding-top值；二是设置父元素的overflow为hidden。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .con1 {
            background-color: seagreen;
            width: 600px;
            height: 600px;
        }
        .con2 {
            background-color: burlywood;
            width: 400px;
            height: 400px;
        }

        .con3 {
            background-color: #20c997;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class="con1">
    <div class="con2">
        <div class="con3"></div>
    </div>
</div>
</body>
</html>

初始效果如下：