CSS：父元素的高度是由哪个子元素撑开的

最新推荐文章于 2024-07-24 11:16:38 发布

lambda啊

最新推荐文章于 2024-07-24 11:16:38 发布

阅读量1k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/weixin_54197911/article/details/124578556

版权

尚硅谷网易新闻中设计：在一个a元素（display：block）中放置一个img元素与div元素，为div元素设置一个margin-top:-30px后，a元素高度发生改变。
在这里插入图片描述按理来说，a元素的高度应该由img元素（display：block）的高度撑开，但上图表明并非如此，那么a元素的高度究竟是由哪个子元素进行撑开的，接下来进行测试：

    <style>
        .outer1{
            background-color: blue;
            /* margin-top: -200px; */
        }
        .inner1 {
            height: 100px;
            width: 100px;
            background-color: purple;
            /* margin-top: 150px; */
        }
        .inner2 {
            height: 100px;
            width: 150px;
            background-color: rgb(15, 80, 100);
            /* margin-top: -150px; */
            /* margin-bottom: 150px; */
        }
        .inner3 {
            height: 100px;
            width: 200px;
            background-color: rgb(218, 227, 38);
            /* margin-top: -150px; */
        }
        .inner4 {
            height: 100px;
            width: 250px;
            background-color: rgb(208, 38, 227);
            margin-top: -250px; 
        }
        .inner5 {
            height: 100px;
            width: 300px;
            background-color: rgb(75, 31, 80);
            /* margin-top: -250px; */
        }
        .outer2{
            height: 200px;
            width: 90%;
            background-color: rgba(255, 0, 0,0.3);
            /* margin-top: 250px; */
        }
        .outer3{
            height: 100px;
            width: 80%;
            background-color: rgba(128, 255, 0,0.5);
            /* margin-top: 150px; */
        }
    </style>
</head>
<body>
    <div class="outer1">
        <!-- <img src="./练习图片/p1.jpg" alt=""> -->
        <div class="inner1"></div>
        <div class="inner2"></div>
        <div class="inner3"></div>
        <div class="inner4"></div>
        <div class="inner5"></div>
    </div>
    <div class="outer2"></div>
    <div class="outer3"></div>
</body>

未给inner4设置margin-top：-250px时的网页如下：
在这里插入图片描述 给inner4设置margin-top：-250px时的网页如下：
结论：父元素outer1的高度是由inner1与inner5的位置所决定的。也就是说父元素的padding-top与inner1的margin-top重合，而父元素的padding-bottom与inner5的margin-bottom重合。

lambda啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：父元素的高度是由哪个子元素撑开的

尚硅谷网易新闻中设计：在一个a元素（display：block）中放置一个img元素与div元素，为div元素设置一个margin-top:-30px后，a元素高度发生改变。按理来说，a元素的高度应该由img元素（display：block）的高度撑开，但上图表明并非如此，那么a元素的高度究竟是由哪个子元素进行撑开的，接下来进行测试： <style> .outer1{ background-color: blue; /*
复制链接

扫一扫