css Margin塌陷问题（margin属性撑不开盒子）

小灰灰 2023-06-05 12:48 25阅读 0赞

## 问题 ##

**在两个盒子嵌套时，内部的盒子设置的margin-X会加到外边的盒子上，导致内部的盒子margin-X设置失败。。。**

## 解决方案 ##

1、外部盒子设置一个边框

2、外部盒子设置**overflow:hidden;**

3、使用伪元素类

.clearfix:before{
        
    　　content:””;
    　　display:table;
    }

## 实例代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>margin-top塌陷</title>
        <style type="text/css">
            .clearfix:before{
        
                content:"";
                display:table;
            }  /* 第三种解决塌陷的方法，相当于第一种加了边框 第三种方法是最常用的方法 */
    
            .con{
        
                width: 300px;
                height: 300px;
                background-color: gold;
                /*border:1px solid black;  /* 第一种解决塌陷的方法 */
                /*overflow:hidden;  /* 第二种解决塌陷的方法 *!*/
            }
    
            .box{
        
                width: 200px;
                height: 100px;
                background-color: green;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="con clearfix">
            <div class="box"></div>
        </div>
    </body>
    </html>

文章摘自：[https://www.cnblogs.com/reyinever/p/10629982.html][https_www.cnblogs.com_reyinever_p_10629982.html]

转载于:https://www.cnblogs.com/penghewen-cnblogs/p/11211182.html

[https_www.cnblogs.com_reyinever_p_10629982.html]: https://www.cnblogs.com/reyinever/p/10629982.html

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS--解决margin塌陷(margin-top失效)--实例

原文网址：[CSS--解决margin塌陷(margin-top失效)--实例\_IT利刃出鞘的博客-CSDN博客][CSS--_margin_margin-top_--_IT

快来打我*/ 2023年10月01日 08:12/ 0 赞/ 23 阅读

相关盒子模型 margin 塌陷问题

盒子模型 ![Image 1][] margin 外边距 padding 内边距盒子布局的稳定性：优先使用 width > padding > margin

古城微笑少年丶/ 2023年06月23日 03:00/ 0 赞/ 16 阅读

相关 css Margin塌陷问题（margin属性撑不开盒子）

问题在两个盒子嵌套时，内部的盒子设置的margin-X会加到外边的盒子上，导致内部的盒子margin-X设置失败。。。解决方案 1、外部盒子设置一个边框 2

小灰灰/ 2023年06月05日 12:48/ 0 赞/ 26 阅读

相关 margin塌陷

文章目录 1. 什么是margin塌陷 2. 问题场景 3. 怎么破 1. 什么是margin塌陷

曾经终败给现在/ 2022年08月31日 04:53/ 0 赞/ 209 阅读

相关【CSS】1035- 再看 margin 塌陷和合并问题

![3ec29c9cd1edc2e0c936a88a8c3afa26.png][] 前言小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可

心已赠人/ 2022年08月29日 06:19/ 0 赞/ 207 阅读

相关问题与对策：CSS的margin塌陷（collapse）

来源：[http://www.ido321.com/387.html][http_www.ido321.com_387.html] <!DOCTYPEHTML PUB

雨点打透心脏的1/2处/ 2022年08月11日 09:59/ 0 赞/ 193 阅读

相关 CSS的margin塌陷（collapse）

<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html>

素颜马尾好姑娘i/ 2022年06月15日 22:49/ 0 赞/ 257 阅读

相关解决margin塌陷问题

magin塌陷：在普通文档流中，当一个元素被包含在另一个元素中时，子元素设置margin-top无效。源代码： <!DOCTYPE html> <htm

短命女/ 2022年06月05日 22:41/ 0 赞/ 291 阅读

相关【CSS】margin塌陷与合并问题及BFC初探

1.margin塌陷问题 margin塌陷指的是嵌套父子块级元素垂直方向（次方向）的margin会结合到一起，并取最大的值，子元素的margin会往父元素顶部上方方向塌陷。（

ゝ一纸荒年。/ 2022年04月24日 14:18/ 0 赞/ 299 阅读

相关 margin塌陷和margin合并问题及解决方案

一，margin塌陷父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值. 正常情况下,父级元素应该相对浏览器进行定

短命女/ 2021年07月25日 21:48/ 0 赞/ 448 阅读