demo1和demo2存在margin合并问题：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
弥补方案：bfc;

添加一个父级盒子做bfc：

.wrapper{
        overflow: hidden;
}

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin合并</title>

    <style>

    *{margin: 0;padding: 0;}

    .box1{

        background-color: red;

        margin-right: 100px;

    }

    .box2{

        background-color: green;

        margin-left: 100px;

    }

    .demo1{

        background-color: red;

        margin-bottom: 100px;

    }

    .demo2{

        background-color: green;

        margin-top: 100px;

    }

    .wrapper{

        overflow: hidden;

    }

    </style>

</head>

<body>

    <!-- box1和box2是正常的margin相加 -->

    <span class="box1">123</span>

    <span class="box2">234</span>

    <!-- 添加一个父级盒子做bfc -->

    <div class="wrapper">

        <div class="demo1">1</div>

    </div>

    <!-- 添加一个父级盒子做bfc -->

    <div class="wrapper">

        <div class="demo2">2</div>

    </div>

    <script>

        /**

         *

         * demo1和demo2存在margin合并问题：

        外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

        合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

        解决方案：bfc;

         */

    </script>

</body>

</html>

bug:margin合并的更多相关文章

  1. 解决margin塌陷和margin合并

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  3. margin合并和浮动

    1.父子元素margin塌陷问题子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中 ...

  4. 影响CSS的margin合并的几个属性

    很多人知道,在CSS中存在Margin合并的现象,比如下代码: <style> div { margin:10px; height:100px; background:red; } < ...

  5. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  6. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  7. margin合并及解决办法

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 水平方向不会发生合并 只有普通文档流中块框的垂直外边距才会发生外边距合并 ...

  8. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  9. 相邻元素之间的margin合并问题

    任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的 外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距 ...

随机推荐

  1. P,NP,NPC的通俗解释

    这或许是众多OIer最大的误区之一.    你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这个只有搜了,这已经被证明是NP问题 了”之类的话.你要知道,大多数人此时所说的NP问题其实都是指的N ...

  2. WPF 动画：同为控件不同命 - 简书

    原文:WPF 动画:同为控件不同命 - 简书 1. 及格与优秀 读大学的时候,有一门课的作业是用 PPT 展示. 但是我们很多同学都把 PPT 当做 Word 来用,就单纯地往里面堆文字. 大家都单纯 ...

  3. WPF RoutedEvent and HitTest - 简书

    原文:WPF RoutedEvent and HitTest - 简书 学习的时候切忌心浮气躁,慢慢的过每一个知识点,不要漏掉任何细节.不然当遇到细节问题的时候,会恼,会闹,会悔不该当初--花一下午调 ...

  4. WPF 日历模板改写

    原文:WPF 日历模板改写 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83346221  本 ...

  5. Selenium2+python自动化-文件上传

    前言 文件上传是web页面上很常见的一个功能,自动化成功中操作起来却不是那么简单. 一般分两个场景:一种是input标签,这种可以用selenium提供的send_keys()方法轻松解决:另外一种非 ...

  6. 技本功丨用短平快的方式告诉你：Flink-SQL的扩展实现

    2019年1月28日,阿里云宣布开源“计算王牌”实时计算平台Blink回馈给ApacheFlink社区.官方称,计算延迟已经降到毫秒级,也就是你在浏览网页的时候,眨了一下眼睛,淘宝.天猫处理的信息已经 ...

  7. Ubuntu系统下在PyCharm里用virtualenv集成TensorFlow

    我的系统环境 Ubuntu 18.04 Python3.6 PyCharm 2018.3.2 community(免费版) Java 1.8 安装前准备 由于众所周知的原因,安装中需要下载大量包,尽量 ...

  8. c++ Dynamic Memory (part 2)

    Don't use get to initialize or assign another smart pointer. The code that use the return from get c ...

  9. Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问题

    Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问 ...

  10. 《linux内核分析》 第二周

    20135130 王川东 计算机三个“法宝”:存储程序计算机.函数调用堆栈和中断机制 深入理解函数调用堆栈: 堆栈是C语言运行时必须的一个记录调用路径和参数的空间: 作用包括: 函数调用框架: 保存参 ...