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. Linux创建软硬链接和打包压缩、解压缩

    软硬链接 ln = link make links between files 语法: 软链接 ln -s 源文件 链接名称 实例: ln -s HelloWord.java hw.lnk 给Hell ...

  2. Spring官网阅读（八）容器的扩展点（三）（BeanPostProcessor）

    在前面两篇关于容器扩展点的文章中,我们已经完成了对BeanFactoryPostProcessor很FactoryBean的学习,对于BeanFactoryPostProcessor而言,它能让我们对 ...

  3. 微软关于LINQ的101个例子

    记录,备查. 101 LINQ Sqmples

  4. [hdu4710 Balls Rearrangement]分段统计

    题意:求∑|i%a-i%b|,0≤i<n 思路:复杂度分析比较重要,不细想还真不知道这样一段段跳还真的挺快的=.= 令p=lcm(a,b),那么p就是|i%a-i%b|的循环节.考虑计算n的答案 ...

  5. Python--oop面向对象的学习1

    类和对象的成员分析 ·类和对象都可以存储成员,成员可以归类为所有,也可以归对象所有 ·类存储成员时使用的是与类关联的一个对象 ·独享存储成员时存储在当前对象中 ·对象访问一个成员,如果对象中没有该成员 ...

  6. sqli-labs之Page-4

    第五十四关 题目给出了数据库名为challenges. 这一关是依旧字符型注入,但是尝试10次后,会强制更换表名等信息.所以尽量在认真思考后进行尝试 爆表名 ?id=-1' union select ...

  7. leetcode 第184场周赛第一题(数组中的字符串匹配）

    一.函数的运用 1,strstr(a,b); 判断b是否为a的子串,如果是,返回从b的开头开始到a的结尾 如“abcdefgh” “de” 返回“defgh”: 如果不是子串,返回NULL: 2,me ...

  8. React:Lifting State Up

    在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的.在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西.只是 ...

  9. 流复制-pg_basebackup (有自定义表空间)

    一.组成部分 1.walsender进程是用来发送WAL日志记录的 2.walreceiver进程是用来接收WAL日志记录的 3.startup进程是用来apply日志的 二.主库配置 1.授权账号, ...

  10. Redis-主从

    主从复制过程 1.从服务器开始连接主服务器时,会向主服务器发送一个SYNC同步命令 2.主服务器接收到命令后,执行BGSAVE,异步的将写命令保存到一个缓冲区里 3.主服务器执行完BGSAVE之后,就 ...