标签（空格分隔）： 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. 如何去maven仓库下载jar包

    Maven仓库地址 : http://search.maven.org/ https://mvnrepository.com/ 或者你直接百度搜索 : maven仓库 第一个就是 我现在想下载myba ...

  2. 用c语言创建双向环形链表

    作为一个C开发人员,无论在求职笔试题中,还是在工程项目中,都会遇到用c语言创建双向环形链表.这个也是理解和使用c指针的一项基本功. #include<...>//头文件省略 typedef ...

  3. adb 常用命令-转载

    转自:https://blog.csdn.net/suxing_ing/article/details/54907860 显示当前运行的全部模拟器:adb devices 获取序列号:adb get- ...

  4. xxl-job源码分析

    1 调度中心API服务 1.任务结果回调服务: 2.执行器注册服务: 3.执行器注册摘除服务: 4.触发任务单次执行服务,支持任务根据业务事件触发: API暴露代码:com.xxl.job.admin ...

  5. FBI树-数据结构(二叉树)

    问题 B: [2004_p4]FBI树-数据结构 时间限制: 1 Sec  内存限制: 125 MB提交: 57  解决: 46 题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称 ...

  6. [转]TopShelf 用法

    static void Main(string[] args) { { x.Service<SyncData>(s => { s.ConstructUsing(name => ...

  7. Linux通配符和关机命令

      通配符 | # 管道符,或者(正则) > # 输出重定向 >> # 输出追加重定向 < # 输入重定向 << # 追加输入重定向 ~ # 当前用户家目录 `` ...

  8. 七、Python-正则表达式

    一.正则式表达式语法 正则表达式是一种用来匹配字符串的强有力的武器,设计思想是一种描述性的语言来给字符串定义一个规则,烦死符合规则的字符串,就认为它匹配,否则不匹配 行定位符:用来描述字符串的边界 ^ ...

  9. 【机器学习_8】pandas

    背景 关于同一个话题,不同作者也有不同行文结构.但要真正理解并会用,在我的经验里,是必须要自己重新组织的. 本文是基于以往看过的资料,从自身数据处理应用的角度出发,重新组织pandas应用结构,希望能 ...

  10. SpringBoot整合StringData JPA

    目录 SpringBoot整合StringData JPA application.yml User.class UserRepository.java UserController SpringBo ...