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. [2016北京集训试题7]thr-[树形dp+树链剖分+启发式合并]

    Description Solution 神仙操作orz. 首先看数据范围,显然不可能是O(n2)的.(即绝对不是枚举那么简单的),我们考虑dp. 定义f(x,k)为以x为根的子树中与x距离为k的节点 ...

  2. sqlserver 导出数据到Excel

    1.导出非正式Excel EXEC master..xp_cmdshell 'bcp t.dbo.tcad out D:\MySelf\output\Temp.xls -c -q -S".& ...

  3. github如何删除仓库中文件夹

    github项目中,经常大家更新.添加都非常熟悉,但是如果想要删掉一个文件夹,很多人就不知道怎么操作了. 网上查了一些方法,大部分都是删除仓库重新上传,这样肯定是不行的,首先不说任务量大,而且删除仓库 ...

  4. JavaScript 中函数的参数

    functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… } 参数规则 JavaScript 函数定义时形参没有指定数据类型. Ja ...

  5. [SHELL]查看端口，文件，服务关系的四个命令netstat,lsof,fuser,nmap

    一,netstat (1)简介 netstat主要是用来打印系统网络的状态信息,当输入netstat后,输出如下: 可以看出,netstat的输出分为两个部分组成: 一个是Active Interne ...

  6. OpenLDAP编译安装及配置

    原文发表于cu:2016-06-20 参考文档: 原理:http://seanlook.com/2015/01/15/openldap_introduction/ 官方文档: http://www.o ...

  7. Linux 配置网络连接

    在VMware里,依次点击”编辑“ - ”虚拟网络编辑器“,如下图,我选择的是NAT模式: 在这个界面接着点"NAT设置",查看虚拟机的网关,这个网关在第三步要用.我这里的网关是1 ...

  8. Hybrid APP基础篇(四)->JSBridge的原理

    说明 JSBridge实现原理 目录 前言 参考来源 前置技术要求 楔子 原理概述 简介 url scheme介绍 实现流程 实现思路 第一步:设计出一个Native与JS交互的全局桥对象 第二步:J ...

  9. 20181023-10 Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 07

    作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2290 Scrum master:范靖旋 一.小组介绍 组长:王一可 组员: ...

  10. Android开发第二阶段（4）

    今天:对按扭位置重新调整了一下布局了一下,改变了layout中见面的字体格式等等是其更美观. 明天:对图片的修改和替换.