<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. Netlink 内核实现分析 2

    netlink 应用层如何创建socket 应用层通过socket()系统调用创建Netlink套接字,socket系统调用的第一个参数可以是AF_NETLINK或PF_NETLINK(在Linux系 ...

  2. JAVA学习准备

    Java学习准备 MarkDown语法学习 字体 hello,world! hello,world! hello,world! 引用 即使最小的帆也能远航 分割线 图片 超链接 点击跳转到我的邮箱 列 ...

  3. Java初始化静态变量的时间顺序

    1. 开始吧! 今天,我们来探讨交流下静态变量初始化过程.Java虚拟机在类加载期间也同样遵循这个过程. 2. 初始化过程 在较高的层次上,JVM执行以下步骤: 首先,加载并链接类.然后,这个过程的& ...

  4. Android Support v4\v7\v13和AndroidX理解【转载】

    为什么要用support库呢? 因为在低版本Android平台上开发一个APP时,想使用高版本才有的功能,此时就需要使用Support来支持兼容. 1. android-support-v4 comp ...

  5. win10安装MySQL5.7.31 zip版

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

  6. kali 系列学习02 - 被动扫描

    被动扫描是指目标无法察觉的情况下进行信息收集,注意有经验的渗透工程师会在信息收集上花费整个测试过程一半以上的时间,信息量太大,需要自动化的信息收集工具. 一.借鉴<kali linux2 网络渗 ...

  7. FL Studio进行侧链的三种方式（下）

    在上篇教程中我们了解了在FL Studio中进行侧链的第一种方式,今天我们就来继续带领大家了解进行侧链的另外两种方式. 如何使用 Fruity Peak Controller(果味峰值控制器)在FL ...

  8. 教你用Camtasia制作精美片头

    大家都知道在视频播放中,如果有一个令人印象深刻的精彩开头,整个视频的内容都能因此得到不少升华.所以有一个好的片头对于视频的制作来说十分重要.今天我们就来讲一下用Camtasia制作片头的方法. 首先, ...

  9. python接口测试4-数据库获取参数

    首先确定需要传递的参数和接口,使用接口测试工具验证一下,接口和参数没有问题. 编写python接口脚本 import requests import unittest import json impo ...

  10. Python_生成器和迭代器的区别

    迭代器和生成器的区别是什么?这个问题面试的时候经常作为灵魂拷问.今天一起从概念到代码梳理一遍,作为总结和记录. 区别是: 生成器的好处是延迟计算,一次返回一个结果.也就是说,它不会一次生成所有的结果, ...