标签（空格分隔）： margin塌陷

margin垂直方向塌陷问题：

如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

       .box1{

           width:300px;

           height:200px;

           background-color:red;

       }

        .box2{

            width:400px;

            height:300px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box1"></div>

        <div class="box2"></div>

    </div>

</body>

</html>

执行结果为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

       .box1{

           width:300px;

           height:200px;

           background-color:red;

           margin-bottom: 20px;

       }

        .box2{

            width:400px;

            height:300px;

            background-color: green;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box1"></div>

        <div class="box2"></div>

    </div>

</body>

</html>

如上述代码的编写过程如下，查看红色盒子和绿色盒子中间的间距为50px;

  • 总结：如果是margin里面的设置下边的margin设置较大，我们可以看做两个盒子，一个是大盒子一个是小盒子，大盒子装着小盒子；

    通过上述的例子可以看到，两个何止之间的间距为50px;

问题2:

如果我们设置浮动呢结果还是这样的吗？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

        .father{

            width:400px;

            overflow: hidden;

            border:1px solid grey;

        }

       .box1{

           width:300px;

           height:200px;

           background-color:red;

           margin-bottom: 20px;

           float:left;

       }

        .box2{

            width:400px;

            height:300px;

            background-color: green;

            margin-top: 50px;

            float:left;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box1"></div>

        <div class="box2"></div>

    </div>

</body>

</html>

  • 总结：

    上述的浮动，不存在塌陷问题（即取较大值的问题），中间的高度为margin的和；

margin的垂直方向塌陷的更多相关文章

  1. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  2. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  3. css 垂直方向 margin 边距 重合

    1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...

  4. CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

  5. 《在纹线方向上进行平滑滤波，在纹线的垂直方向上进行锐化滤波》 --Gabor增强的具体实践

    <在纹线方向上进行平滑滤波,在纹线的垂直方向上进行锐化滤波>                                          --Gabor增强的具体实践     一.问 ...

  6. 禁止uiscrollview垂直方向滚动，只允许水平方向滚动；或只允许垂直方向滚动

    禁止UIScrollView垂直方向滚动,只允许水平方向滚动 scrollview.contentSize =  CGSizeMake(你要的长度, 0); 禁止UIScrollView水平方向滚动, ...

  7. 如何让图片在垂直方向与 div的底部对齐 水平居中

    需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...

  8. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

  9. Android RecyclerView（瀑布流）水平/垂直方向分割线

     Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...

随机推荐

  1. 工控随笔_06_西门子_Step7归档项目无法备份的解决方法

    在一次备份Step7项目时,突然发现无法进行备份而是报错,具体的报错内容如下所示: 图 step7 归档程序时报pkzipc.exe 应用程序错误  内存不能为"read" 一.s ...

  2. kibi - join and filter data from multiple Elasticsearch indexes

    Kibi extends Kibana 4.6.4 with data intelligence features. The core feature of Kibi is the capabilit ...

  3. 招聘IT图书兼职作者（长期兼职）

    招聘图书兼职作者(长期兼职),本公司有十多年的计算机图书出版经验,每年出版上百本编程类图书, 和清华大学出版社 电子工业出版社 机械工业出版社都有很好的合作.你可以不用按时上线,不用天天被boss盯着 ...

  4. PAT 乙级 1044 火星数字 （20 分）

    1044 火星数字 (20 分) 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, j ...

  5. Java中ArrayList和LinkedList区别（转）

    具体详情参考原博客:  http://pengcqu.iteye.com/blog/502676

  6. Shiro简介——《跟我学Shiro》

    地址: http://jinnianshilongnian.iteye.com/blog/2018936

  7. CentOS安装MySQL的完整步骤

    1.官方安装文档 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 2.下载 Mysql yum包 http://dev.mysql.co ...

  8. java基础回忆、复习（一）

    一:浅拷贝与深拷贝: 对于基本数据类型,直接进行拷贝,String类型,有两种拷贝方式: 1:直接将原对象中的name的引用值拷贝给新对象的name字段.<浅拷贝> 2:根据原对象中的na ...

  9. thunderbird 日历

    参考: Configuring Thunderbird and Using it to Access Office 365 Mail and Calendar in Cardiff Universit ...

  10. WRF 安装备忘

    ▶ n 年前在笔记本上安装 WRF 的一个过程 ● 安装 cpp,csh,m4,quota,samba # apt-get install cpp csh m4 quota samba ● 网上教程有 ...