margin坍塌

最新推荐文章于 2023-05-13 11:10:48 发布

UNDERCOVERj

最新推荐文章于 2023-05-13 11:10:48 发布

阅读量877

点赞数

分类专栏： html-css 文章标签： margin-top

本文链接：https://blog.csdn.net/github_37037281/article/details/54999856

版权

html-css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

水平方向不会出现margin坍塌
今天在写代码过程中，解决了一个小问题，代码如下。
在.first的div中设置margin-top，效果却是和父div设置margin-top一样，网上又搜了答案总结一下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .main{height: 400px;width: 200px;background: yellow;}
            .first{width: 100px;height: 100px;background: red;margin-bottom: 50px;margin-top: 100px;margin-right: 0px}
            .second{width: 100px;height: 100px;background: black;margin-top: 100px}
        </style>
    </head>
    <body>
    <div class="main">
        <div class="first"></div>
        <div class="second"></div>
    </div>  
    </body>
</html>

解决办法：

在父层div加上：overflow:hidden；
把margin-top外边距改成padding-top内边距；
父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层div加： padding-top: 1px;或者border:1px solid black
让父元素生成一个 block formating context，以下属性可以实现
- float: left/right
- position: absolute
- display: inline-block/table-cell(或其他 table 类型)
- overflow: hidden/auto
  父层div加：position: absolute;