子元素的margin-top属性传递给父元素的问题

最新推荐文章于 2022-10-06 12:53:08 发布

白兔仔

最新推荐文章于 2022-10-06 12:53:08 发布

阅读量584

点赞数

分类专栏： Html/Css 文章标签： css margin-top

本文链接：https://blog.csdn.net/Hreticent/article/details/85096956

版权

Html/Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin-top</title>
    <style>
        body{
            margin:0;
            color:white;
        }
        .fa{
            width:120px;
            height:120px;
            background-color:burlywood;
            margin:0 auto;
        }
        .ch{
            width:80%;
            height:60px;
            background-color:rebeccapurple;
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div class='fa'>
        <div class='ch'>i am child </div>
        i am father
    </div>
</body>
</html>

左侧为要实现的效果，右侧为真的效果

我们期待的效果是,child的顶部距离parent 30px，但是结果是Child距离父div的margin仍然是0，反而parent顶部距离自己的父元素30px.

产生原因：

来看css2.1盒模型中规定的内容：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

总结：

1. 嵌套的元素也共享Margin
2. 一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

解决办法:
1、修改父元素的高度,给父元素加上padding-top:40px;
2、为父元素添加overflow:hidden
3、为父元素添加border
4、为父元素或者子元素声明绝对定位。
5、为父元素或者子元素声明浮动

白兔仔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
子元素的margin-top属性传递给父元素的问题

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫