margin边界重叠问题及解决方案

最新推荐文章于 2024-12-07 22:05:09 发布

辉娜

最新推荐文章于 2024-12-07 22:05:09 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.youkuaiyun.com/weixin_44211097/article/details/120853358

css 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了CSS中margin边界叠加的现象，以及如何通过设置position、overflow、padding、display等属性来解决这个问题。示例代码展示了不同方案的效果，帮助开发者理解和解决元素间距不正确的问题。

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

    <style>
        .root {
            width: 300px;
            height: 300px;
            background-color: beige;
            /* 第一种方案 */
            /* position: absolute; */
            /* 第二种方案 */
            /* overflow: hidden; */
            /* 第三种方案 */
            /* padding-top: 1px;
            /* 第五种解决 */
            /* border: 1px; 
            height: 299px; */
        }
        
        .a {
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            margin-top: 30px;
            /* 第四种方法    我喜欢 */
            display: inline-block;
        }
        
        .b {
            width: 100px;
            height: 100px;
            background-color: rgb(185, 215, 241);
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="a">
            <div class="b">b</div>
        </div>
    </div>
</body>