<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .div {

            width: 200px;

            height: 200px;

        }

        .div1 {

            margin: 50px;

            background: red;

        }

        .div2 {

            margin: 100px;

            background: blue;

        }

    </style>

</head>

<body>

    <div class="div1 div"></div>

    <div class="div2 div"></div>

</body>

</html>

上述代码中，div1和div2都设置了外边距，但是这两个垂直方向的外边距却会发生重叠，实际边距为大的那个盒子的外边距



避免方法：

1.给下面的盒子设置flot:left

2.给下面的盒子设置position:absolute

3.两个盒子都同时设置margin-top/bottom

css外边距重叠及避免方法的更多相关文章

  1. CSS 外边距(margin)重叠及防止方法

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

  2. CSS外边距margin上下元素重叠

    CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...

  3. margin属性以及垂直外边距重叠问题

       盒子的margin属性         盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...

  4. CSS外边距叠加问题

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...

  5. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...

  6. __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  7. CSS 外边距

    CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...

  8. margin,CSS边距重叠

    CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合. 重叠结果计算规则: 两个相邻的外边距都是正数时,折叠结果是它 ...

  9. Css 外边距折叠(collapsed margin ) 浅析

    Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...

随机推荐

  1. Ceph Bluestore首测

    Bluestore 作为 Ceph Jewel 版本推出的一个重大的更新,提供了一种之前没有的存储形式,一直以来ceph的存储方式一直是以filestore的方式存储的,也就是对象是以文件方式存储在o ...

  2. JUC锁种类总结

    在并发编程中有各种各样的锁,有的锁对象一个就身兼多种锁身份,所以初学者常常对这些锁造成混淆,所以这里来总结一下这些锁的特点和实现. 乐观锁.悲观锁 悲观锁 悲观锁是最常见的锁,我们常说的加锁指的也就是 ...

  3. Java 微信端评论表情处理

    1,工具包下载:https://github.com/vdurmont/emoji-java 2,文本保存时处理:EmojiParser.parseToHtmlHexadecimal(str) 3,文 ...

  4. git操作之三：git reset

    在上篇文章中介绍了git restore命令,该命令的可以看作是撤销命令,文件在不同的状态下,使用git restore <file> 命令,会撤销对文件的修改,是文件回到修改前的状态也就 ...

  5. nginx转发php文件到php-fpm服务器提示502错误

    实验将php文件转发给另一个php-fpm服务器处理的时候,出现了502错误: 检查了nginx错误日志,提示: 2019/08/25 17:54:56 [error] 4742#0: *35 rec ...

  6. 如何用Folx的浏览器集成功能设置捕获类型

    Folx的浏览器集成功能,可将Folx的下载功能添加到浏览器的上下文菜单(也就是右键快捷菜单)中,方便用户使用Folx捕获页面中的下载链接,并创建下载任务. 那么,用户需要进行哪些设置才能使用Folx ...

  7. FL Studio乐理教程之添加和弦

    和弦是指有一定音程关系的一组声音,即将三个或以上的音,按照三度或非三度的叠置关系,在纵向上加以结合,就称为和弦. FL Studio可以编辑和弦吗?当然可以!首先我们使用FL Stuido20钢琴卷帘 ...

  8. 带你入门Camtasia Studio录像机软件

    Camtasia软件和其他录制软件不同,不论是编辑功能还是制作功能还是其他功能方面都远远高于其他录制软件.那这边我们可以一起了解一下基础软件功能. 首先,我们在电脑端安装了软件以后,进行实际操作.在操 ...

  9. CorelDRAW“出血线”的精准预设与辅助线便捷操作

    CorelDRAW软件是一款常用的制图工具,非常适合用于印刷品输出,各种印刷图文制作都依赖于它.所以,我们设计者每次用CorelDRAW制图的一个关键就是要做好"标尺辅助线"设置, ...

  10. MAC系统网页链接如何下载

    Folx 5 是一款简单易用.功能强大的Mac OS系统的下载管理器.Folx界面简洁,下载管理方便,支持网页链接下载.BT下载和YouTube下载,而且还可以设置计划任务.搜索BT种子以及添加Tra ...