<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. [MIT6.006] 1. Algorithmic Thinking, Peak Finding 算法思维，峰值寻找

    [MIT6.006] 系列笔记将记录我观看<MIT6.006 Introduction to Algorithms, Fall 2011>的课程内容和一些自己补充扩展的知识点.该课程主要介 ...

  2. c++ 11字符串与string转换常用函数

    这里主要介绍一下string to int 其他方法与这个类似,可到头文件 <string> 中查看 @_Str 转换的字符串 @_Idx 转换的长度(位数) @_Base 进制 doub ...

  3. win10安装MySQL5.7.31 zip版

    因为我之前卸载了安装的(msi,exe)格式的MySQL,现在重新安装zip版的MySQL. 1,下载MySQL MySQL下载地址 : https://dev.mysql.com/downloads ...

  4. sqlilab less11-less18

    less-11 uname和passwd直接带入查询,万能密码 sqlmap自动搜索表单,或者抓包后用-r参数 less-12 post数据用小括号进行包裹,构造万能密码") or 1=1 ...

  5. CDR魔镜插件是什么，有哪些功能？

    CDR魔镜插件是一款功能强大的CorelDRAW插件,很多CDR用户很早直接就有接触,因其强大的功能性和快速运行的特点被广大用户所喜爱,没有繁琐的选项,无论新人小白,还是制图高手都能够很快的适应,实现 ...

  6. 数学分析理论（rudin版）笔记：实数系和复数系.1

    导引 有理数集是"稀疏的"和"稠密的". 选择公理 考虑以下问题:容易找到两个无理数 a, b 使 a + b 为有理数,或者使 ab 为有理数,但是能否使得 ...

  7. # 夏普R shv39 0基础精简优化指南

    手机介绍 夏普AQUOS R是目前市面上用户数量和好评数量都非常多的一款产品.它性价比极高,适合各个年龄段的用户选择来满足办公或者家用或者娱乐等不同方面的需求.目前闲鱼价格在400左右,搭载骁龙835 ...

  8. python定时执行详解

    知识点 1. sched模块,准确的说,它是一个调度(延时处理机制),每次想要定时执行某任务都必须写入一个调度. (1)生成调度器:s = sched.scheduler(time.time,time ...

  9. HTML+JavaScript画函数图像

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

  10. MySQL replace into那些隐藏的风险

    目录 replace into时存在主键冲突 replace into时存在唯一索引冲突 replace into时存在主键冲突&唯一索引冲突 存在问题 结论 MySQL中 replace i ...