盒子模型 margin 塌陷问题

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

#### 盒子模型 ####

![Image 1][]

margin 外边距

padding 内边距

盒子布局的稳定性：

优先使用 width > padding > margin

### 1、上下盒子的margin塌陷 ###

**上下盒子**发生margin塌陷 margin小的盒子塌陷在大的盒子，不是简单叠加。浮动后，左右margin也不会发生塌陷，如想测试，把注释代码取消注释即可。

塌陷效果图：  
![Image 1][]

.box1{ 
        /*float: left;*/
        width: 200px;
        height: 200px;
        background: yellowgreen;
        /*margin: 60px 50px;*/
        margin-bottom: 100px;
        /*margin-right: 50px;*/
    }
    .box2{ 
        /* float: left;*/
        width: 200px;
        height: 200px;
        background: skyblue;
        /* margin-left: -50px; */
        margin: 150px;
    }

##### 2、父子盒子的margin塌陷 #####

**父子盒子**发生margin塌陷 margin小的盒子塌陷在大的盒子。如下例：父盒子margin-top：100px，儿子margin-top：60px，margin塌陷，只有100px

塌陷效果图：  
![Image 1][]

.box1{   /*父盒子*/
        /*float: left;*/
        width: 200px;
        height: 140px;
        /* padding-top: 60px; */
        background: yellowgreen;
        /*border: 1px solid red;*/
        margin-top: 100px;
    }
    .box2{ 
        /*float: left;*/
        width: 100px;
        height: 100px;
        background: skyblue;
        margin-top: 60px; 
    }

[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS盒子塌陷问题解决方案

，盒子塌陷是什么？本应该在父盒子内部的元素跑到了外部。二，为什么会出现盒子塌陷？当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元...

绝地灬酷狼/ 2024年04月17日 06:03/ 0 赞/ 43 阅读

相关盒子模型之外边距margin(HTML、CSS)

盒子模型之外边距margin(HTML、CSS) <!DOCTYPE html> <html lang="en"> <head>

布满荆棘的人生/ 2023年10月03日 12:50/ 0 赞/ 32 阅读

相关 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 赞/ 17 阅读

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

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

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

相关 margin塌陷、合并问题及BFC解决

margin塌陷父子元素之间垂直方向的margin会粘合到一起，取最大的那个值 ![margin1][] <table> <thead> <tr>

痛定思痛。/ 2022年10月25日 05:52/ 0 赞/ 183 阅读

相关 margin塌陷

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

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

相关 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 阅读

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

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

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