标签（空格分隔）： 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. SqlServer高版本数据备份还原到低版本(转)

    原文地址:https://www.jb51.net/article/96454.htm 想要将Sqlserver2014高版本备份的数据还原到低版本SqlServer2008R2上去,但是这在SqlS ...

  2. python基础知识7---补充

    ''' 不可变:数字,字符串,元组 可变:列表,字典 原子:数字,字符串 容器:列表,元组,字典 直接访问:数字 顺序:字符串,列表,元组 映射访问:字典 ''' #一一对应 a,b,c,d,e='h ...

  3. 升级GCC以支持C++11

    本文主要介绍在Linux系统下,如何升级GCC以支持C++11.目前来看GCC是对C++11支持程度最高最多的编译器,但需要GCC4.8及以上版本.  本文使用操作系统:Centos 6.4 Desk ...

  4. PAT 乙级 1074 宇宙无敌加法器 （20 分）

    1074 宇宙无敌加法器 (20 分) 地球人习惯使用十进制数,并且默认一个数字的每一位都是十进制的.而在 PAT 星人开挂的世界里,每个数字的每一位都是不同进制的,这种神奇的数字称为“PAT数”.每 ...

  5. 7.10 break.c 程序

    7.10 break.c 程序 #include <stdio.h> int main(void) { float length, width; printf("Enter th ...

  6. IoC容器的接口设计

    1.从接口BeanFactory---HierarchicalBeanFactory---ConfigurableBeanFactory,是一条主要的BeanFactory设计路径. 2.第二条接口设 ...

  7. 认识MyBatis-总述

    关于mybatis的源码,博客园以及其他平台有了相当多的精美,优秀的解析. 而此次本人的记录通过查阅官方文档,以及实际运行中的代码,来回答有实际意义的问题. 目标:理解MYBATIS.MYBATIS的 ...

  8. MyBatis注解-动态SQL 一个 SqlProvider的demo

    Provider动态语言注解 MyBatis提供了多个注解如:@InsertProvider,@UpdateProvider,@DeleteProvider和@SelectProvider,这些都是建 ...

  9. Python全栈开发记录_第七篇（模块_time_datetime_random_os_sys_hashlib_logging_configparser_re）

    这一篇主要是学习python里面的模块,篇幅可能会比较长 模块的概念:在Python中,一个.py文件就称之为一个模块(Module). 模块一共三种: python标准库 第三方模块 应用程序自定义 ...

  10. 初见Hadoop—- 搭建MyEclipse 访问HDFS 上的文件

    因公司项目需要,开始接触大数据分析这块知识.网上关于大数据这块的知识还是比较多的.学习了一个礼拜了,再次记录一下,自己的学习过程,希望可以帮助后学者少走一些弯路. 服务端的配置,由于公司项目经理已经配 ...