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. mybatis添加信息自动生成主键

    一.使用Oracle数据库 举例:添加员工的时候自动生成主键 1.在dao接口中声明方法 2.在mapper中实现该方法 需要先在数据表中创建序列 3.测试 注意:在调用过save方法之后,emp对象 ...

  2. LeetCode--LinkedList--160. Intersection of Two Linked Lists(Easy)

    160. Intersection of Two Linked Lists(Easy) 题目地址https://leetcode.com/problems/intersection-of-two-li ...

  3. Linux文件系统基本结构

    (1)Linux文件系统为一个倒转的单根树状结构: (2)文件系统的根为“/”: (3)文件系统严格区分大小写: (4)路径使用“/”分割(windows使用“\”): 当前工作目录 (1)每个she ...

  4. [hdu5400 Arithmetic Sequence]预处理，容斥

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=5400 思路:预处理出每个点向左和向右的最远边界,从左向右枚举中间点,把区间答案加到总答案里面.由与可能与前 ...

  5. 三个方法生成python的exe文件

    背景:用的python3.8 方法一:用cmd 输入[pip3 install pyinstaller] 上一条指令报错 事实上,在python3.8版本时,输入pip也会显示是无法支持的语句,需要用 ...

  6. sqli-labs之Page-3

    第三十八关:堆叠注入 $sql="SELECT * FROM users WHERE id='$id' LIMIT 0,1"; /* execute multi query */ ...

  7. 学习docker的一点记录

    0x00 docker简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化 ...

  8. 容器技术之LXC

    什么是容器?在生活中我们常见的容器有各种瓶瓶罐罐.各种能够容纳其它物料的东西叫容器:容器的特点就是有着很好的隔离作用,使得不同的物料互相隔离:除此之外容器还方便运输.方便储存:这是生活中所说的容器,以 ...

  9. Loadrunner中遇到Failed to connect to server[10061] connection refused错误

    (1)run-time setting/browser emulation中,将simulate a new user on each iteration  选项去掉(默认是选中的). 重新运行一切正 ...

  10. 基于 abp vNext 和 .NET Core 开发博客项目 - 完善与美化，Swagger登场

    上一篇文章(https://www.cnblogs.com/meowv/p/12896898.html)已经成功将博客项目跑起来了,那么本篇主要是将之前遗留的问题解决,现在的代码看起来可能还是比较混乱 ...