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. Entity Framework中的几种加载方式

            在Entity Framework中有三种加载的方式,分别是延迟加载,自动加载和显示加载.下面用一个例子来说明:现在有两个表,一个是资料表(Reference),另外一个表是资料分类表 ...

  2. python实现socket通信

    python实现socket很简单,保证你的环境有响应的python环境就可以,我使用的是socket,demo代码如下: server端程序: # coding:utf-8 import socke ...

  3. Spring学习(十一)-----Spring使用@Required注解依赖检查

    Spring学习(九)-----Spring依赖检查 bean 配置文件用于确定的特定类型(基本,集合或对象)的所有属性被设置.在大多数情况下,你只需要确保特定属性已经设置但不是所有属性.. 对于这种 ...

  4. 3星|《十大全球CEO亲授企业高速成长的关键战略》:作为CEO，我也非常坦率地表明过家庭优先于工作

    十大全球CEO亲授 企业高速成长的关键战略(<哈佛商业评论>增刊) <哈佛商业评论>上的10来篇文章合集.大部分都看过,除了一篇中信的访谈,其他大部分是美国的有点旧的案例. 总 ...

  5. 用Python爬下今日头条所有美女，美滋滋！

      我们的学习爬虫的动力是什么? 有人可能会说:如果我学好了,我可以找一个高薪的工作. 有人可能会说:我学习编程希望能够为社会做贡献(手动滑稽) 有人可能会说:为了妹子! ..... 其实我们会发现妹 ...

  6. RNN: Feed Forward, Back Propagation Through Time and Truncated Backpropagation Through Time

    原创作品,转载请注明出处哦~ 了解RNN的前向.后向传播算法的推导原理是非常重要的,这样, 1. 才会选择正确的激活函数: 2. 才会选择合适的前向传播的timesteps数和后向传播的timeste ...

  7. Fedora 28 UEFI模式安装过程记录

    这次的折腾是个意外.不过还是要记录一下. 多次做启动盘,把U盘做坏了.将U盘用量产工具修复以后就能做启动盘了.从官网下了Fedora 28的镜像(与CentOS同属RedHat系,尽量与鸟哥一致),用 ...

  8. shell命令之at 执行一次性定时任务的用法

    大家都知道crontab是执行定时任务的命令,那么at又是什么呢? 其实at也是定时任务命令,不同的是crontab是执行循环任务,at执行一次性任务 首先说下时间例子 Minute    at no ...

  9. Asphalting Roads（翻译！）

    Description City X consists of n vertical and n horizontal infinite roads, forming n × n intersectio ...

  10. 团队Alpha冲刺（五）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...