css中相邻元素的margin其实是会自动合并的，且取较大值。

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test</title>

        <style>

            .div1 {

                width: 60px;

                height: 60px;

                background-color: #fdd;

                border: 10px solid #fee;

                padding: 20px;

                margin: 30px;

                /*设置上下margin为30px*/

            }

            .div2 {

                width: 60px;

                height: 60px;

                background-color: #fdd;

                border: 10px solid #fee;

                padding: 20px;

                margin: 60px 30px;

                /*设置上下margin为60px*/

            }

        </style>

    </head>

    <body>

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

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

    </body>

</html>

实际效果：div1和div2上下相距60px，而不是90px。

那float的坑是什么啦？

那就是float会取消相邻元素margin的自动合并！

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test</title>

        <style>

            div {

                width: 60px;

                height: 60px;

                background-color: #fdd;

                border: 10px solid #fee;

                padding: 20px;

                margin: 30px;

                float: left;

                /*设置左浮动*/

            }

        </style>

    </head>

    <body>

        <div></div>

        <div></div>

    </body>

</html>

效果如下：两个div左右相距60px，而不是30px了！

相邻元素margin的自动合并与float的坑的更多相关文章

  1. 关于margin外边距合并的问题

    一 .兄弟元素margin外边距合并演示   当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...

  2. 相邻元素之间的margin合并问题

    任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的 外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距 ...

  3. 日常踩坑 — 相邻元素之间的margin合并问题。

    踩坑:使用v-for渲染的组件,当然图中的id已经换成class,还是没有解决这个问题,于是各种查找资料,我就不信简单的CSS问题这么难解决! v-for渲染组件级传值: <div class= ...

  4. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

  5. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

    这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...

  6. margin外边距合并问题以及解决方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  8. 转载：margin外边距合并问题以及解决方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

随机推荐

  1. apply call bind的用法与实现

    概念 apply call 和bind 允许为不同的对象分配和调用属于一个对象的函数/方法.同时它们可以改变函数内 this 的指向. 区别 apply 和 call 接收的参数形式不同 apply ...

  2. MySQL 主从复制原理及过程讲解

    mysql主从原理描述,摘自老男孩. 下面简 单描述下 MySQL Replication 复制的原理及过程 . 1.在 Slave 服务器上执行 start slave 命令开启主从复制开关,主从复 ...

  3. 2020年腾讯实习生C++面试题&持续更新中（3）

    2020年腾讯实习生C++面试题&持续更新中(3) hello,大家好,我是好好学习,天天编程的天天. 来给大家大家分享腾讯实习生面经了. 天天希望大家看到面经后一定要做充分的准备,结合自己掌 ...

  4. linux wc 的用法-linux 下统计行数、单词数、字符个数

    linux wc 的用法-linux 下统计行数.单词数.字符个数   wc : wc -l 统计有多少行 wc -w 统计有多少个单词 wc -c 统计有多少个字符

  5. 盲注fuzz

    \'"%df'%df"and%201=1and%201=2'%20and%20'1'='1'%20and%20'1'='2"%20and%20"1"= ...

  6. python unittest TestCase间共享数据（全局变量的使用）

    文章目录 1.setupclass里设置self.xxx变量,不同用例之间无法实时共享参数变动 2.setupclass里设置globals().["xxx"]变量,不同用例之间可 ...

  7. jenkins 流水线学习

    最佳实践: https://www.cnblogs.com/itech/p/5678643.html 一些样例 https://jenkins.io/doc/pipeline/examples/ gi ...

  8. node的http模块

    node中的几个常用核心模块的api返回的都是eventEmitter的实例,也就是说都继承了on和emit方法,用以监听事件并触发回调来处理事件. http模块处理网络请求通常是创建一个server ...

  9. 查找算法----二分查找与hash查找

    二分查找 有序列表对于我们的实现搜索是很有用的.在顺序查找中,当我们与第一个元素进行比较时,如果第一个元素不是我们要查找的,则最多还有 n-1 个元素需要进行比较. 二分查找则是从中间元素开始,而不是 ...

  10. Djano之ORM多表查询操作

    # 把 model 转化为 迭代器去循环 MODEL.objects.all().iterator() # 等同于 values, values_list, 但是 only 这种方式 获取字段属性依旧 ...